import { ICreateNewJobProps } from '../../Components/Home/Jobs/CreateNewJob/CreateNewJob.types'
import SectionHeader from '../../Components/Common/SectionHeader/SectionHeader'
import { useTranslation } from 'react-i18next';
import { Grid, Typography, Button, FormControlLabel, Checkbox, CircularProgress } from '@material-ui/core';
import classes from "../styles/createjobv2.module.css"
import MultiSelectDropDownComp from '../ui/MultiSelectDropDownComp';
import SelectorComp from '../ui/SelectorComp';
import InputBox from '../ui/InputBox';
import CustomDatePicker from '../ui/CustomDatePicker';
import CustomTimePicker from '../ui/CustomTimePicker';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';
import EditIcon from '@material-ui/icons/Edit';
import CreateJobTable from '../tables/CreateJobTable';
import { useDropzone } from 'react-dropzone'
import { Formik, Form, FieldArray } from 'formik';
import { AppState } from '../../Redux';
import { useSelector } from 'react-redux';
import { ADDRESS_GROUPS, AU_STATES, COUNTRIES, DOCS, movementTypeOptions, NZ_STATES, POST_TO, SERVICE_TYPE, tripOptions, USER_ROLES } from '../lib/constants';
import { ICompanyInfo } from '../../../../Application/DTOs/CompanyDto/CompanyDto.type';
import { useEffect, useState } from 'react';
import { Job } from '../../Api/Job/Job';
import { Address } from '../../Api/Address/Address';
import { IAddress } from '../../../../Application/DTOs/AddressDto/AddressDto.types';
import CreateAddressModal from '../modals/CreateAddressModal';
import { CreateJobModalsState } from '../../Types/global';
import EditAddressModal from '../modals/EditAddressModal';
import { Customer } from '../../Api/Customer/Customer';
import { validationCreateJobSchema } from '../lib/validationSchema';
import { toast } from 'react-toastify';

const jobApi = new Job();
const addressService = new Address();
const customerApi = new Customer()

interface SelectedOptions {
    id: string;
    index: string
    state: string
}

const CreateJobV2 = (props: ICreateNewJobProps, ref: any) => {
    const [t] = useTranslation();
    const { ADMIN_USER, SUPER_ADMIN } = USER_ROLES;
    const user = useSelector((state: AppState) => state.user.response);
    const isUserAdmin = user?.type === ADMIN_USER;
    const isSuperAdmin = user?.type === SUPER_ADMIN;
    const countryInitial = isSuperAdmin || isUserAdmin ? "australia" : user?.company?.country || "australia";
    const { getRootProps, getInputProps } = useDropzone()
    const companyDropdownData = useSelector((state: AppState) => state.company);
    const [dataSet, setDataset] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [selectedMovementType, setSelectedMovementType] = useState<string | unknown>("");
    const [addresses, setAddresses] = useState([]);
    const [addContainer, setAddContainer] = useState<boolean>(false)
    const [selectedPickUpIds, setSelectedPickUpIds] = useState<SelectedOptions[]>([]);
    const [selectedDeliverIds, setSelectedDeliverIds] = useState<SelectedOptions[]>([]);
    const [customerOptions, setCustomerOptions] = useState<string[]>([]);
    const [addressId, setAddressId] = useState<string>("");

    const [modals, setModals] = useState<CreateJobModalsState>({
        modal1: false,
        modal2: false,
    });

    useEffect(() => {
        fetchData();
        fetchAddresses();
    }, []);

    const fetchData = async () => {
        const cachedOptions = localStorage.getItem('transOptions');
        if (cachedOptions) {
            setDataset(JSON.parse(cachedOptions));
            setLoading(false);
        } else {
            try {
                const response = await jobApi.getTransportMapping();
                setDataset(response.data);
                localStorage.setItem('transOptions', JSON.stringify(response.data));
            } catch (err) {
                console.error('Failed to fetch transport mapping:', err);
            } finally {
                setLoading(false);
            }
        }
    };

    const fetchAddresses = async () => {
        try {
            const companyId = 184;
            const response = await addressService.allForJob(
                companyId,
                true,
                "australia",
                false,
                false,
                true
            );
            setAddresses(response.data as IAddress[]);
        } catch (err) {
            toast.error(t('error_getting_addresses'));
        }
    };

    const getCustomerPerCompany = (search_id: any) => {
        customerApi.getAll(0, 99999, isUserAdmin, undefined, search_id, true)
            .then((response) => {
                const rows = response.data.rows;
                const count = response.data.count;
                setCustomerOptions(rows)
                return { jobs: rows, count }
            })
            .catch((err: any) => {
                toast.error(t('error_getting_customers'));
                return { jobs: [], count: 0 }

            });
    }

    const initialValues = {
        company: "",
        movementType: "",
        shipmentNo: "",
        customer: "",
        jobType: "",
        m141: "",
        customerReference: "",
        tripType: "",
        transportType: "",
        temperature: "",
        groupType: "",
        goodsDesc: "",
        totalQty: "",
        netWeight: "",
        palletAcc: "",
        palletAccNumber: "",
        grossWeight: "",
        volume: "",
        palletAccAction: "",
        containerNo: "",
        wharfSlot: "",
        sealNo: "",
        cntrlfd: "",
        ecSealNo: "",
        declaredGrossWeight: "",
        document: "",
        serviceType: "",
        jobServiceCharges: "",
        postTo: "",
        buyPrice: "",
        sellPrice: "",
        jobInstruction: "",
        containerOverwight: false,
        jobDetails: [
            {
                jobDetailPackage: '',
                jobDetailQty: '',
                jobDetailSKU: '',
                jobDetailDesc: '',
                jobDetailLot: '',
                jobDetailHeight: '',
                jobDetailWidth: '',
                jobDetailLength: '',
                jobDetailNetWeight: '',

            },
        ],
        jobDetailVesselName: '',
        jobDetailETA: '',
        jobDetailVoyage: '',
        trip: [
            {
                tripPickVehicleType: '',
                tripPickGroupType: '',
                tripPickCountry: countryInitial,
                tripPickState: '',
                tripPickShipId: '',
                tripPickAddress: '',
                tripPickDate: "",
                tripPickTime: '',
                tripPickJobRequirement: '',
                tripDeliverGroupType: "",
                tripDeliverCounty: countryInitial,
                tripDeliverState: "",
                tripDeliverShipId: "",
                tripDeliverAddress: "",
                tripDeliverDate: "",
                tripDeliverTime: "",
                tripDeliverJobRequirement: "",
            },
        ],
    };

    const handleSubmit = async (values: any, { setSubmitting, resetForm }: any) => {
        // console.log(values);

        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        // Define the job data object
        const jobData: any = {
            company_id: values.company,
            movement_type_id: 456,
            shipment_number: values.shipmentNo,
            customer: values.customer,
            job_type: values.jobType,
            reference_number: values.m141,
            customer_reference: values.customerReference,
            trip_type: values.tripType,
            transport_type: values.transportType,
            service_type: values.serviceType,
            post_to: values.postTo,
            buy_price: values.buyPrice,
            cell_price: values.sellPrice,
            job_instructions: values.jobInstruction,
        };

        // Initialize request body
        const requestBody: any = {
            jobData,
            trip: values.trip.map((trip: any) => ({
                pickup_address_id: trip.tripPickShipId,
                delivery_address_id: trip.tripDeliverShipId,
                pickup_date_time: `${trip.tripPickDate}T${trip.tripPickTime}`,
                delivery_date_time: `${trip.tripDeliverDate}T${trip.tripDeliverTime}`,
                pickup_job_requirement: trip.tripPickJobRequirement,
                delivery_job_requirement: trip.tripDeliverJobRequirement,
            })),
        };

        // Conditional logic for selectedMovementType
        if (selectedMovementType === "containers") {
            // Include jobContainers and vessel information
            requestBody.jobContainers = [
                {
                    container_no: parseInt(values.containerNo),
                    seal_no: values.sealNo,
                    declared_gross_weight: values.declaredGrossWeight,
                    wharf_slot: values.wharfSlot,
                    empty_container_release_number: values.ecSealNo,
                    cntr_last_day: values.cntrlfd,
                    over_weight: values.containerOverwight ? "YES" : "NO",
                }
            ];
            // Add vessel information
            requestBody.jobData.vessel_name = values.jobDetailVesselName;
            requestBody.jobData.vessel_eta = values.jobDetailETA;
            requestBody.jobData.voyoge = values.jobDetailVoyage;
        } else {
            // Include jobDetails
            requestBody.jobDetails = values.jobDetails.map((detail: any) => ({
                job_detail_package: detail.jobDetailPackage,
                job_detail_qty: detail.jobDetailQty,
                job_detail_sku: detail.jobDetailSKU,
                job_detail_desc: detail.jobDetailDesc,
                job_detail_lot: detail.jobDetailLot,
                job_detail_height: detail.jobDetailHeight,
                job_detail_width: detail.jobDetailWidth,
                job_detail_length: detail.jobDetailLength,
                job_detail_net_weight: detail.jobDetailNetWeight,
            }));
        }

        const raw = JSON.stringify(requestBody);

        const requestOptions: RequestInit = {
            method: "POST",
            headers: myHeaders,
            body: raw,
            redirect: "follow"
        };

        try {
            const response = await fetch("http://172.16.16.11:5000/api/v3/createNewJob", requestOptions);
            const result = await response.json();
            if (result.status_code === 201 && result.success===true) {
                toast.success(result.message);
                resetForm()
            }
        } catch (error) {
            console.error(error);
        } finally {
            setSubmitting(false);
        }
    };


    if (loading) {
        return <CircularProgress />;
    }

    const getSelectedOptionForPickUpIndex = (idx: number) => {
        return selectedPickUpIds[idx] || { id: "", index: idx };
    };

    const getSelectedOptionForDeliverIndex = (idx: number) => {
        return selectedDeliverIds[idx] || { id: "", index: idx };
    };

    const toggleModal = (modalName: keyof CreateJobModalsState) => {
        setModals((prevState) => ({
            ...prevState,
            [modalName]: !prevState[modalName],
        }));
    }

    const handleButtonClick = (id: string) => {
        setAddressId(id);
    };


    const selectedMovementData = dataSet?.find(movement => movement.movementType.code === selectedMovementType) ?? null;
    const jobTypesData = selectedMovementData ? selectedMovementData.jobTypes : [];
    const vehicleTypes = selectedMovementData ? selectedMovementData.vehicleTypes : [];
    const formattedJobTypes = jobTypesData?.map(job => ({
        value: job.id,
        label: job.code?.charAt(0)?.toUpperCase() + job.code?.slice(1)?.replaceAll("_", " ")
    }));

    const formattedVehiclesTypes = vehicleTypes?.map(vehicle => ({
        value: vehicle.id,
        label: vehicle.code?.charAt(0)?.toUpperCase() + vehicle.code?.slice(1)?.replaceAll("_", " ")
    }));

    return (
        <>
            <CreateAddressModal
                close={() => toggleModal("modal1")}
                open={modals.modal1}
            />
            <EditAddressModal
                close={() => toggleModal("modal2")}
                open={modals.modal2}
                addressId={addressId}
                addresses={addresses}
            />
            <Formik
                initialValues={initialValues}
                onSubmit={handleSubmit}
                enableReinitialize={true}
                validationSchema={validationCreateJobSchema}
            >
                {({ isSubmitting, handleChange, setFieldValue, values, errors, touched }) => (
                    <Form>
                        <SectionHeader subtitle={t('transport_management')} title={'Add a Job'} />
                        <div className={classes.jobcontainer}>
                            <Grid container spacing={3}>
                                <Grid item xs={4}>
                                    <MultiSelectDropDownComp<ICompanyInfo>
                                        options={companyDropdownData.list}
                                        label="Company"
                                        name="company"
                                        value={values.company}
                                        getOptionLabel={(option) => option.companyName}
                                        getOptionId={(option) => option.id}
                                        onChange={(event, selectedOption) => {
                                            const id = selectedOption ? selectedOption.id : ""
                                            setFieldValue("company", id);
                                            getCustomerPerCompany(id)
                                        }}
                                        error={errors.company && touched.company ? errors.company : null}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <SelectorComp
                                        label="Movement Type"
                                        name="movementType"
                                        value={values.movementType}

                                        onChange={(event) => {
                                            console.log(event, "ddddd");

                                            const newValue = event.target.value;
                                            setFieldValue("movementType", newValue);
                                            setSelectedMovementType(newValue)
                                        }}
                                        options={movementTypeOptions}
                                        error={errors.movementType && touched.movementType ? errors.movementType : null}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <InputBox
                                        label="Shipment Number"
                                        value={values.shipmentNo}
                                        onChange={handleChange}
                                        name="shipmentNo"
                                        type="text"
                                        disabled={false}
                                        error={errors.shipmentNo && touched.shipmentNo ? errors.shipmentNo : null}
                                    />
                                </Grid>
                            </Grid>

                            <Grid container spacing={3}>
                                <Grid item xs={4}>
                                    <MultiSelectDropDownComp<any>
                                        options={customerOptions}
                                        label="Customer"
                                        name="customer"
                                        value={values.customer}
                                        getOptionLabel={(option) => option['company_name'] || ''}
                                        getOptionId={(option) => option['user']['company_id']}
                                        onChange={(event, selectedOption) => {
                                            const id = selectedOption ? selectedOption['user']['company_id'] : "";
                                            setFieldValue("customer", id);
                                        }}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <SelectorComp
                                        label="Job Type"
                                        name="jobType"
                                        value={values.jobType}
                                        onChange={handleChange}
                                        options={formattedJobTypes}
                                        error={errors.jobType && touched.jobType ? errors.jobType : null}

                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <InputBox
                                        label="MI4U Reference Number"
                                        value={values.m141}
                                        onChange={handleChange}
                                        name="m141"
                                        type="text"
                                        disabled={false}
                                        error={errors.m141 && touched.m141 ? errors.m141 : null}
                                    />
                                </Grid>
                            </Grid>

                            <Grid container spacing={3}>
                                <Grid item xs={4}>
                                    <InputBox
                                        label="Customer Reference Number"
                                        value={values.customerReference}
                                        onChange={handleChange}
                                        name="customerReference"
                                        type="text"
                                        disabled={false}
                                        error={errors.customerReference && touched.customerReference ? errors.customerReference : null}

                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <SelectorComp
                                        label="Trip Type"
                                        options={tripOptions}
                                        name="tripType"
                                        value={values.tripType}
                                        onChange={handleChange}
                                        error={errors.tripType && touched.tripType ? errors.tripType : null}

                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <SelectorComp
                                        label="Transport Type"
                                        options={formattedVehiclesTypes}
                                        name="transportType"
                                        value={values.transportType}
                                        onChange={handleChange}
                                        error={errors.transportType && touched.transportType ? errors.transportType : null}

                                    />
                                </Grid>
                            </Grid>

                            <div className={classes.line}></div>
                            {/* trip section  start*/}
                            <Grid container spacing={3}>
                                <FieldArray name="trip">
                                    {({ insert, remove, push }) => (
                                        <>
                                            {values.trip.length > 0 && values.trip.map((item, index) => {
                                                return < >
                                                    {/* pickup from */}
                                                    <Grid item xs={6} key={index}>
                                                        <Typography
                                                            variant="body1"
                                                            gutterBottom
                                                        >
                                                            TRIP {index + 1}-PICK UP FROM
                                                        </Typography>
                                                        <div className={classes.flexWrapper}>
                                                            <SelectorComp
                                                                label="Vehicle Type"
                                                                value={item.tripPickVehicleType}
                                                                onChange={handleChange}
                                                                options={tripOptions}
                                                                name={`trip.${index}.tripPickVehicleType`}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripPickVehicleType && touched.trip && touched.trip[index] && touched.trip[index].tripPickVehicleType
                                                                    ? errors.trip[index].tripPickVehicleType
                                                                    : null}
                                                            />
                                                            <SelectorComp
                                                                label="Group Type"
                                                                value={item.tripPickGroupType}
                                                                onChange={handleChange}
                                                                options={ADDRESS_GROUPS}
                                                                name={`trip.${index}.tripPickGroupType`}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripPickGroupType && touched.trip && touched.trip[index] && touched.trip[index].tripPickGroupType
                                                                    ? errors.trip[index].tripPickGroupType
                                                                    : null}
                                                            />
                                                        </div>
                                                        <div className={classes.flexWrapper}>
                                                            <SelectorComp
                                                                label="Country"
                                                                value={item.tripPickCountry}
                                                                onChange={handleChange}
                                                                options={COUNTRIES}
                                                                name={`trip.${index}.tripPickCountry`}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripPickCountry && touched.trip && touched.trip[index] && touched.trip[index].tripPickCountry
                                                                    ? errors.trip[index].tripPickCountry
                                                                    : null}
                                                            />
                                                            <SelectorComp
                                                                label="State"
                                                                value={selectedPickUpIds[index]?.state ? selectedPickUpIds[index]?.state : item.tripPickState}
                                                                onChange={handleChange}
                                                                options={item.tripPickCountry === "australia" ? AU_STATES : item.tripPickCountry === "new_zealand" ? NZ_STATES : []}
                                                                name={`trip.${index}.tripPickState`}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripPickState && touched.trip && touched.trip[index] && touched.trip[index].tripPickState
                                                                    ? errors.trip[index].tripPickState
                                                                    : null}
                                                            />
                                                        </div>



                                                        <div className={classes.flexWrapper}>
                                                            <MultiSelectDropDownComp<any>
                                                                options={addresses}
                                                                label="Ship Id"
                                                                name={`trip.${index}.tripPickShipId`}
                                                                value={getSelectedOptionForPickUpIndex(index).id}
                                                                getOptionLabel={(option) => option.id.toString()}
                                                                getOptionId={(option) => option.id}
                                                                onChange={(event, selectedOption) => {
                                                                    const newSelectedOptions = [...selectedPickUpIds];
                                                                    newSelectedOptions[index] = {
                                                                        ...selectedOption,
                                                                        index: index
                                                                    };
                                                                    setSelectedPickUpIds(newSelectedOptions);
                                                                    setFieldValue(`trip.${index}.tripPickShipId`, selectedOption ? selectedOption.id : "");
                                                                }}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripPickShipId && touched.trip && touched.trip[index] && touched.trip[index].tripPickShipId
                                                                    ? errors.trip[index].tripPickShipId
                                                                    : null}
                                                            />
                                                            <MultiSelectDropDownComp
                                                                options={addresses}
                                                                label="Address"
                                                                name={`trip.${index}.tripPickAddress`}
                                                                value={getSelectedOptionForPickUpIndex(index).id}
                                                                getOptionLabel={(option) => `${option.company_name} - ${option.street_number}, ${option.city}, ${option.state}, ${option.postcode}`}
                                                                getOptionId={(option) => option.id}
                                                                onChange={(event, selectedOption) => {
                                                                    const newSelectedOptions = [...selectedPickUpIds];
                                                                    newSelectedOptions[index] = {
                                                                        ...selectedOption,
                                                                        index: index
                                                                    };
                                                                    setSelectedPickUpIds(newSelectedOptions);
                                                                    setFieldValue(`trip.${index}.tripPickShipId`, selectedOption ? selectedOption.id : "");
                                                                }}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripPickAddress && touched.trip && touched.trip[index] && touched.trip[index].tripPickAddress
                                                                    ? errors.trip[index].tripPickAddress
                                                                    : null}
                                                            />
                                                        </div>
                                                        <div className={classes.flexWrapper}>
                                                            <Button
                                                                fullWidth
                                                                startIcon={<EditIcon />}
                                                                color="primary"
                                                                variant="contained"
                                                                onClick={() => { toggleModal("modal2"); handleButtonClick(selectedPickUpIds[index]?.id) }}
                                                                disabled={item.tripPickShipId?.length === 0}
                                                            >
                                                                Edit Address
                                                            </Button>
                                                            <Button
                                                                fullWidth
                                                                startIcon={<AddIcon />}
                                                                color="primary"
                                                                variant="contained"
                                                                onClick={() => toggleModal("modal1")}
                                                            >
                                                                Add New Address
                                                            </Button>
                                                        </div>

                                                        <div className={classes.flexWrapper}>
                                                            <CustomDatePicker
                                                                selectedDate={item.tripPickDate}
                                                                handleDateChange={handleChange}
                                                                placeholder="DD/MM/YYYY"
                                                                name={`trip.${index}.tripPickDate`}
                                                                error={touched.trip && touched.trip[index] && touched.trip[index].tripPickDate && errors.trip && errors.trip[index] && errors.trip[index].tripPickDate
                                                                    ? errors.trip[index].tripPickDate
                                                                    : null}
                                                            />

                                                            <CustomTimePicker
                                                                label="Time"
                                                                value={item.tripPickTime}
                                                                onChange={handleChange}
                                                                readOnly={false}
                                                                name={`trip.${index}.tripPickTime`}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripPickTime && touched.trip && touched.trip[index] && touched.trip[index].tripPickTime
                                                                    ? errors.trip[index].tripPickTime
                                                                    : null}
                                                            />
                                                        </div>
                                                        <div className={classes.flexWrapper}>
                                                            <InputBox
                                                                label="Add Job Requirement"
                                                                value={item.tripPickJobRequirement}
                                                                onChange={handleChange}
                                                                name={`trip.${index}.tripPickJobRequirement`}
                                                                type="text"
                                                                disabled={false}
                                                            />
                                                        </div>
                                                    </Grid>
                                                    {/* deliver to */}
                                                    <Grid item xs={6} key={index}>
                                                        <Typography
                                                            variant="body1"
                                                            gutterBottom
                                                        >
                                                            TRIP {index + 1}-DELIVER TO
                                                        </Typography>
                                                        <div className={classes.flexWrapper}>
                                                            <SelectorComp
                                                                label="Group Type"
                                                                value={item.tripDeliverGroupType}
                                                                onChange={handleChange}
                                                                options={tripOptions}
                                                                name={`trip.${index}.tripDeliverGroupType`}

                                                            />
                                                        </div>
                                                        <div className={classes.flexWrapper}>
                                                            <SelectorComp
                                                                label="Country"
                                                                value={item.tripDeliverCounty}
                                                                onChange={handleChange}
                                                                options={COUNTRIES}
                                                                name={`trip.${index}.tripDeliverCounty`}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripDeliverCounty && touched.trip && touched.trip[index] && touched.trip[index].tripDeliverCounty
                                                                    ? errors.trip[index].tripDeliverCounty
                                                                    : null}
                                                            />
                                                            <SelectorComp
                                                                label="State"
                                                                onChange={handleChange}
                                                                value={selectedDeliverIds[index]?.state ? selectedDeliverIds[index]?.state : item.tripDeliverState}
                                                                options={item.tripDeliverCounty === "australia" ? AU_STATES : item.tripDeliverCounty === "new_zealand" ? NZ_STATES : []}
                                                                name={`trip.${index}.tripDeliverState`}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripDeliverState && touched.trip && touched.trip[index] && touched.trip[index].tripDeliverState
                                                                    ? errors.trip[index].tripDeliverState
                                                                    : null}
                                                            />
                                                        </div>
                                                        <div className={classes.flexWrapper}>
                                                            <MultiSelectDropDownComp<any>
                                                                options={addresses}
                                                                label="Ship Id"
                                                                name={`trip.${index}.tripDeliverShipId`}
                                                                value={getSelectedOptionForDeliverIndex(index).id}
                                                                getOptionLabel={(option) => option.id.toString()}
                                                                getOptionId={(option) => option.id}
                                                                onChange={(event, selectedOption) => {
                                                                    const newSelectedOptions = [...selectedDeliverIds];
                                                                    newSelectedOptions[index] = {
                                                                        ...selectedOption,
                                                                        index: index
                                                                    };
                                                                    setSelectedDeliverIds(newSelectedOptions);
                                                                    setFieldValue(`trip.${index}.tripDeliverShipId`, selectedOption ? selectedOption.id : "");
                                                                }}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripDeliverShipId && touched.trip && touched.trip[index] && touched.trip[index].tripDeliverShipId
                                                                    ? errors.trip[index].tripDeliverShipId
                                                                    : null}
                                                            />
                                                            <MultiSelectDropDownComp
                                                                options={addresses}
                                                                label="Address"
                                                                name={`trip.${index}.tripDeliverAddress`}
                                                                value={getSelectedOptionForDeliverIndex(index).id}
                                                                getOptionLabel={(option) => `${option.company_name} - ${option.street_number}, ${option.city}, ${option.state}, ${option.postcode}`}
                                                                getOptionId={(option) => option.id}
                                                                onChange={(event, selectedOption) => {
                                                                    const newSelectedOptions = [...selectedDeliverIds];
                                                                    newSelectedOptions[index] = {
                                                                        ...selectedOption,
                                                                        index: index
                                                                    };
                                                                    setSelectedDeliverIds(newSelectedOptions);
                                                                    setFieldValue(`trip.${index}.tripDeliverShipId`, selectedOption ? selectedOption.id : "");
                                                                }}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripDeliverAddress && touched.trip && touched.trip[index] && touched.trip[index].tripDeliverAddress
                                                                    ? errors.trip[index].tripDeliverAddress
                                                                    : null}
                                                            />
                                                        </div>
                                                        <div className={classes.flexWrapper}>
                                                            <Button
                                                                fullWidth
                                                                startIcon={<EditIcon />}
                                                                color="primary"
                                                                variant="contained"
                                                                disabled={item.tripDeliverShipId?.length === 0}
                                                                onClick={() => { toggleModal("modal2"); handleButtonClick(selectedDeliverIds[index]?.id) }}
                                                            >
                                                                Edit Address
                                                            </Button>
                                                            <Button
                                                                fullWidth
                                                                startIcon={<AddIcon />}
                                                                color="primary"
                                                                variant="contained"
                                                                onClick={() => toggleModal("modal1")}
                                                            >
                                                                Add New Address
                                                            </Button>
                                                        </div>

                                                        <div className={classes.flexWrapper}>


                                                            <CustomDatePicker
                                                                selectedDate={item.tripDeliverDate}
                                                                handleDateChange={handleChange}
                                                                placeholder="DD/MM/YYYY"
                                                                name={`trip.${index}.tripDeliverDate`}
                                                                error={touched.trip && touched.trip[index] && touched.trip[index].tripDeliverDate && errors.trip && errors.trip[index] && errors.trip[index].tripDeliverDate
                                                                    ? errors.trip[index].tripDeliverDate
                                                                    : null}
                                                            />

                                                            <CustomTimePicker
                                                                label="Time"
                                                                value={item.tripDeliverTime}
                                                                onChange={handleChange}
                                                                readOnly={false}
                                                                name={`trip.${index}.tripDeliverTime`}
                                                                error={errors.trip && errors.trip[index] && errors.trip[index].tripDeliverTime && touched.trip && touched.trip[index] && touched.trip[index].tripDeliverTime
                                                                    ? errors.trip[index].tripDeliverTime
                                                                    : null}
                                                            />
                                                        </div>
                                                        <div className={classes.flexWrapper}>
                                                            <InputBox
                                                                label="Add Job Requirement"
                                                                value={item.tripDeliverJobRequirement}
                                                                onChange={handleChange}
                                                                name={`trip.${index}.tripDeliverJobRequirement`}
                                                                type="text"
                                                                disabled={false}
                                                            />
                                                        </div>
                                                    </Grid>

                                                </>

                                            })}
                                            <Grid item xs={12} >
                                                <div
                                                    className={classes.flexWrapperIcon}
                                                    onClick={() => push({
                                                        tripPickVehicleType: '',
                                                        tripPickGroupType: '',
                                                        tripPickCountry: countryInitial,
                                                        tripPickState: '',
                                                        tripPickShipId: '',
                                                        tripPickAddress: '',
                                                        tripPickDate: null,
                                                        tripPickTime: '',
                                                        tripPickJobRequirement: '',
                                                        tripDeliverGroupType: '',
                                                        tripDeliverCounty: countryInitial,
                                                        tripDeliverState: '',
                                                        tripDeliverShipId: '',
                                                        tripDeliverAddress: '',
                                                        tripDeliverDate: null,
                                                        tripDeliverTime: '',
                                                        tripDeliverJobRequirement: ''
                                                    })}>
                                                    <AddIcon />
                                                    <div>Add trip</div>
                                                </div>
                                            </Grid>
                                        </>
                                    )}

                                </FieldArray >

                            </Grid>
                            {/* trip section  end*/}


                            {/* job section */}
                            {selectedMovementType === "containers" ?
                                <>
                                    <div className={classes.line}></div>
                                    <Typography
                                        variant="body1"
                                        gutterBottom
                                    >
                                        JOB DETAILS
                                    </Typography>
                                    <Grid container spacing={4}>
                                        <Grid item xs={4} >
                                            <InputBox
                                                value={values.jobDetailVesselName}
                                                onChange={handleChange}
                                                name={`jobDetailVesselName`}
                                                type="text"
                                                label="Vessel Name"
                                                disabled={false}
                                                error={errors.jobDetailVesselName && touched.jobDetailVesselName ? errors.jobDetailVesselName : null}

                                            />
                                        </Grid>
                                        <Grid item xs={4}>
                                            <CustomDatePicker
                                                selectedDate={values.jobDetailETA}
                                                handleDateChange={handleChange}
                                                placeholder="DD/MM/YYYY"
                                                name={`jobDetailETA`}
                                                error={errors.jobDetailETA && touched.jobDetailETA ? errors.jobDetailETA : null}

                                            />
                                        </Grid>
                                        <Grid item xs={3}>
                                            <InputBox
                                                value={values.jobDetailVoyage}
                                                onChange={handleChange}
                                                name={`jobDetailVoyage`}
                                                type="text"
                                                label="Voyage"
                                                disabled={false}
                                                error={errors.jobDetailVoyage && touched.jobDetailVoyage ? errors.jobDetailVoyage : null}

                                            />
                                        </Grid>

                                        <Grid item xs={12} >
                                            <div
                                                className={classes.flexWrapperIcon}
                                                onClick={() => setAddContainer((prev) => !prev)}
                                            >
                                                <AddIcon />
                                                <div>Add Container Details</div>
                                            </div>
                                        </Grid>
                                    </Grid>
                                    <CreateJobTable />

                                    {addContainer && <>
                                        <FormControlLabel control={<Checkbox checked={values.containerOverwight}
                                            onChange={handleChange}
                                            name="containerOverwight"
                                        />}
                                            label="Tick if container is overweight"
                                            style={{ margin: "20px 0" }}
                                        />

                                        <div className={classes.flexWrapper}>
                                            <div className={classes.flexColumn}>
                                                <InputBox
                                                    value={values.containerNo}
                                                    onChange={handleChange}
                                                    name="containerNo"
                                                    type="text"
                                                    label="Container No."
                                                    disabled={false}
                                                    error={errors.containerNo && touched.containerNo ? errors.containerNo : null}

                                                />
                                                <InputBox
                                                    value={values.sealNo}
                                                    onChange={handleChange}
                                                    name="sealNo"
                                                    type="text"
                                                    label="Seal No."
                                                    disabled={false}
                                                    error={errors.sealNo && touched.sealNo ? errors.sealNo : null}

                                                />
                                                <InputBox
                                                    value={values.ecSealNo}
                                                    onChange={handleChange}
                                                    name="ecSealNo"
                                                    type="text"
                                                    label="EC Seal No."
                                                    disabled={false}
                                                    error={errors.ecSealNo && touched.ecSealNo ? errors.ecSealNo : null}

                                                />

                                            </div>
                                            <div className={classes.flexColumn}>
                                                <InputBox
                                                    value={values.wharfSlot}
                                                    onChange={handleChange}
                                                    name="wharfSlot"
                                                    type="text"
                                                    label="Wharf Slot"
                                                    disabled={false}
                                                    error={errors.wharfSlot && touched.wharfSlot ? errors.wharfSlot : null}

                                                />
                                                <InputBox
                                                    value={values.cntrlfd}
                                                    onChange={handleChange}
                                                    name="cntrlfd"
                                                    type="text"
                                                    label="CNTR LFD"
                                                    disabled={false}
                                                    error={errors.cntrlfd && touched.cntrlfd ? errors.cntrlfd : null}

                                                />
                                                <InputBox
                                                    value={values.declaredGrossWeight}
                                                    onChange={handleChange}
                                                    name="declaredGrossWeight"
                                                    type="text"
                                                    label="Declared Gross Weight"
                                                    disabled={false}
                                                    error={errors.declaredGrossWeight && touched.declaredGrossWeight ? errors.declaredGrossWeight : null}
                                                />

                                            </div>
                                            <div className={classes.flexColumn}>
                                                <div {...getRootProps()} className={classes.draganddrop}>
                                                    <input {...getInputProps()} />
                                                    <p>Drag 'n' drop to upload, or browse documents</p>
                                                </div>
                                                <SelectorComp
                                                    label="Document Type"
                                                    value={values.document}
                                                    onChange={handleChange}
                                                    options={DOCS}
                                                    name="document"
                                                    error={errors.document && touched.document ? errors.document : null}

                                                />
                                                <div className={classes.flexWrapperIcon}><AddIcon /><div>Add Documents</div></div>
                                            </div>

                                        </div>

                                        <Button
                                            fullWidth
                                            className={classes.btnCreate}
                                            color="secondary"
                                            variant="contained"
                                        >
                                            Submit
                                        </Button>
                                    </>}

                                </> :
                                <>
                                    {/* Job detail all start */}
                                    <div className={classes.line}></div>
                                    <Typography
                                        variant="body1"
                                        gutterBottom
                                    >
                                        JOB DETAILS
                                    </Typography>
                                    <FieldArray name="jobDetails">
                                        {({ insert, remove, push }) => (
                                            <div>
                                                {values.jobDetails.length > 0 &&
                                                    values.jobDetails.map((jobDetail, index) => (
                                                        <Grid container spacing={0} key={index}>
                                                            <Grid item xs={12}>
                                                                <div className={classes.flexWrapper}>
                                                                    <SelectorComp
                                                                        label="Type of Package"
                                                                        value={jobDetail.jobDetailPackage}
                                                                        onChange={handleChange}
                                                                        options={tripOptions}
                                                                        name={`jobDetails.${index}.jobDetailPackage`}
                                                                    />
                                                                    <InputBox
                                                                        value={jobDetail.jobDetailQty}
                                                                        onChange={handleChange}
                                                                        name={`jobDetails.${index}.jobDetailQty`}
                                                                        type="number"
                                                                        label="Qty"
                                                                        disabled={false}
                                                                        error={errors.jobDetails && errors.jobDetails[index] && errors.jobDetails[index].jobDetailQty && touched.jobDetails && touched.jobDetails[index] && touched.jobDetails[index].jobDetailQty
                                                                            ? errors.jobDetails[index].jobDetailQty
                                                                            : null}
                                                                    />
                                                                    <InputBox
                                                                        label="SKU"
                                                                        value={jobDetail.jobDetailSKU}
                                                                        onChange={handleChange}
                                                                        name={`jobDetails.${index}.jobDetailSKU`}
                                                                        type="text"
                                                                        disabled={false}
                                                                        error={errors.jobDetails && errors.jobDetails[index] && errors.jobDetails[index].jobDetailSKU && touched.jobDetails && touched.jobDetails[index] && touched.jobDetails[index].jobDetailSKU
                                                                            ? errors.jobDetails[index].jobDetailSKU
                                                                            : null}
                                                                    />
                                                                    <InputBox
                                                                        label="Description"
                                                                        value={jobDetail.jobDetailDesc}
                                                                        onChange={handleChange}
                                                                        name={`jobDetails.${index}.jobDetailDesc`}
                                                                        type="text"
                                                                        disabled={false}
                                                                        error={errors.jobDetails && errors.jobDetails[index] && errors.jobDetails[index].jobDetailDesc && touched.jobDetails && touched.jobDetails[index] && touched.jobDetails[index].jobDetailDesc
                                                                            ? errors.jobDetails[index].jobDetailDesc
                                                                            : null}
                                                                    />
                                                                    <InputBox
                                                                        label="Lot"
                                                                        value={jobDetail.jobDetailLot}
                                                                        onChange={handleChange}
                                                                        name={`jobDetails.${index}.jobDetailLot`}
                                                                        type="text"
                                                                        disabled={false}
                                                                        error={errors.jobDetails && errors.jobDetails[index] && errors.jobDetails[index].jobDetailLot && touched.jobDetails && touched.jobDetails[index] && touched.jobDetails[index].jobDetailLot
                                                                            ? errors.jobDetails[index].jobDetailLot
                                                                            : null}
                                                                    />
                                                                    <InputBox
                                                                        value={jobDetail.jobDetailHeight}
                                                                        onChange={handleChange}
                                                                        name={`jobDetails.${index}.jobDetailHeight`}
                                                                        type="number"
                                                                        label="H"
                                                                        disabled={false}
                                                                        error={errors.jobDetails && errors.jobDetails[index] && errors.jobDetails[index].jobDetailHeight && touched.jobDetails && touched.jobDetails[index] && touched.jobDetails[index].jobDetailHeight
                                                                            ? errors.jobDetails[index].jobDetailHeight
                                                                            : null}
                                                                    />
                                                                    <InputBox
                                                                        value={jobDetail.jobDetailWidth}
                                                                        onChange={handleChange}
                                                                        name={`jobDetails.${index}.jobDetailWidth`}
                                                                        type="number"
                                                                        label="W"
                                                                        disabled={false}
                                                                        error={errors.jobDetails && errors.jobDetails[index] && errors.jobDetails[index].jobDetailWidth && touched.jobDetails && touched.jobDetails[index] && touched.jobDetails[index].jobDetailWidth
                                                                            ? errors.jobDetails[index].jobDetailWidth
                                                                            : null}
                                                                    />
                                                                    <InputBox
                                                                        value={jobDetail.jobDetailLength}
                                                                        onChange={handleChange}
                                                                        name={`jobDetails.${index}.jobDetailLength`}
                                                                        type="number"
                                                                        label="L"
                                                                        disabled={false}
                                                                        error={errors.jobDetails && errors.jobDetails[index] && errors.jobDetails[index].jobDetailLength && touched.jobDetails && touched.jobDetails[index] && touched.jobDetails[index].jobDetailLength
                                                                            ? errors.jobDetails[index].jobDetailLength
                                                                            : null}
                                                                    />
                                                                    <InputBox
                                                                        label="Net Weight"
                                                                        value={jobDetail.jobDetailNetWeight}
                                                                        onChange={handleChange}
                                                                        name={`jobDetails.${index}.jobDetailNetWeight`}
                                                                        type="text"
                                                                        disabled={false}
                                                                        error={errors.jobDetails && errors.jobDetails[index] && errors.jobDetails[index].jobDetailNetWeight && touched.jobDetails && touched.jobDetails[index] && touched.jobDetails[index].jobDetailNetWeight
                                                                            ? errors.jobDetails[index].jobDetailNetWeight
                                                                            : null}
                                                                    />
                                                                    <DeleteIcon fontSize='large' color="primary" style={{ cursor: "pointer" }} onClick={() => remove(index)} />
                                                                </div>

                                                            </Grid>
                                                        </Grid>
                                                    ))}
                                                <Grid item xs={12} >
                                                    <div className={classes.flexWrapperIcon} onClick={() => push(initialValues.jobDetails[0])}>
                                                        <AddIcon /><div>Add Line</div>
                                                    </div>
                                                </Grid>
                                            </div>
                                        )}
                                    </FieldArray>

                                    <Grid container spacing={2} style={{ margin: "20px 0" }}>
                                        <Grid item xs={6} >
                                            <InputBox
                                                label="Temperature"
                                                value={values.temperature}
                                                onChange={handleChange}
                                                name="temperature"
                                                type="text"
                                                disabled={false}
                                                error={errors.temperature && touched.temperature ? errors.temperature : null}
                                            />
                                        </Grid>
                                        <Grid item xs={6} >
                                            <InputBox
                                                label="Volume"
                                                value={values.volume}
                                                onChange={handleChange}
                                                name="volume"
                                                type="text"
                                                disabled={false}
                                                error={errors.volume && touched.volume ? errors.volume : null}
                                            />

                                        </Grid>
                                        <Grid item xs={6} >
                                            <InputBox
                                                label="Total Qty"
                                                value={values.totalQty}
                                                onChange={handleChange}
                                                name="totalQty"
                                                type="text"
                                                disabled={false}
                                                error={errors.totalQty && touched.totalQty ? errors.totalQty : null}
                                            />

                                        </Grid>
                                        <Grid item xs={6} >
                                            <InputBox
                                                label="Goods Description"
                                                value={values.goodsDesc}
                                                onChange={handleChange}
                                                name="goodsDesc"
                                                type="text"
                                                disabled={false}
                                                error={errors.goodsDesc && touched.goodsDesc ? errors.goodsDesc : null}

                                            />
                                        </Grid>
                                        <Grid item xs={6} >

                                            <InputBox
                                                label="Total Net Weight"
                                                value={values.netWeight}
                                                onChange={handleChange}
                                                name="netWeight"
                                                type="text"
                                                disabled={false}
                                                error={errors.netWeight && touched.netWeight ? errors.netWeight : null}
                                            />
                                        </Grid>
                                        <Grid item xs={6} >

                                            <InputBox
                                                label="Pallet Account Type"
                                                value={values.palletAcc}
                                                onChange={handleChange}
                                                name="palletAcc"
                                                type="text"
                                                disabled={false}
                                            />
                                        </Grid>
                                        <Grid item xs={6} >
                                            <InputBox
                                                label="Total Gross Weight"
                                                value={values.grossWeight}
                                                onChange={handleChange}
                                                name="grossWeight"
                                                type="text"
                                                disabled={false}
                                                error={errors.grossWeight && touched.grossWeight ? errors.grossWeight : null}
                                            />
                                        </Grid>
                                        <Grid item xs={6} >
                                            <InputBox
                                                label="Pallet Account Number"
                                                value={values.palletAccNumber}
                                                onChange={handleChange}
                                                name="palletAccNumber"
                                                type="text"
                                                disabled={false}
                                            />
                                        </Grid>
                                        <Grid item xs={12} >

                                            <Button
                                                type='submit'
                                                fullWidth
                                                className={classes.btnCreate}
                                                color="primary"
                                                variant="contained"
                                            >
                                                Add Temperature Details
                                            </Button>
                                        </Grid>
                                    </Grid>
                                    {/* Job detail all end */}
                                </>
                            }

                            {selectedMovementType !== "containers" && <>
                                <div className={classes.line}></div>
                                <Typography
                                    variant="body1"
                                    gutterBottom
                                >
                                    UPLOAD DOCUMENTS
                                </Typography>
                                <div className={classes.flexColumn}>
                                    <div {...getRootProps()} className={classes.draganddrop}>
                                        <input {...getInputProps()} />
                                        <p>Drag 'n' drop to upload, or browse documents</p>
                                    </div>
                                    <SelectorComp
                                        label="Document Type"
                                        value={values.document}
                                        onChange={handleChange}
                                        options={DOCS}
                                        name="document"
                                    />
                                    <div className={classes.flexWrapperIcon}><AddIcon /><div>Add Documents</div></div>
                                </div>
                            </>}

                            <div className={classes.line}></div>
                            <Typography
                                variant="body1"
                                gutterBottom
                            >
                                JOB CHARGES
                            </Typography>

                            <Grid container spacing={4}>

                                <Grid item xs={3}>

                                    <SelectorComp
                                        label="Service Type"
                                        value={values.serviceType}
                                        name="serviceType"
                                        onChange={handleChange}
                                        options={SERVICE_TYPE}
                                        error={errors.serviceType && touched.serviceType ? errors.serviceType : null}
                                    />
                                </Grid>
                                <Grid item xs={3}>
                                    <SelectorComp
                                        label="Post To"
                                        value={values.postTo}
                                        onChange={handleChange}
                                        options={POST_TO}
                                        name="postTo"
                                    />
                                </Grid>
                                <Grid item xs={3}>
                                    <InputBox
                                        label="Buy Price"
                                        value={values.buyPrice}
                                        onChange={handleChange}
                                        name="buyPrice"
                                        type="text"
                                        disabled={false}
                                    />
                                </Grid>
                                <Grid item xs={3}>
                                    <InputBox
                                        label="Sell Price"
                                        onChange={handleChange}
                                        name="sellPrice"
                                        type="text"
                                        disabled={false}
                                        value={values.sellPrice}

                                    />
                                </Grid>
                            </Grid>


                            <div className={classes.line}></div>
                            <Typography
                                variant="body1"
                                gutterBottom
                            >
                                JOB INSTRUCTIONS
                            </Typography>

                            <Grid container spacing={0}>

                                <Grid item xs={12}>
                                    <InputBox
                                        label=""
                                        value={values.jobInstruction}
                                        onChange={handleChange}
                                        name="jobInstruction"
                                        type="text"
                                        disabled={false}
                                        multiline={true}
                                    />
                                </Grid>
                            </Grid>
                        </div>
                        <Button
                            type='submit'
                            fullWidth
                            className={classes.btnCreate}
                            color="primary"
                            variant="contained"
                            disabled={isSubmitting}
                        >
                            Submit
                        </Button>
                    </Form>
                )}

            </Formik>
        </>

    )
}

export default CreateJobV2