import { View, Text, Image, TextInput, TouchableOpacity, StyleSheet, ScrollView, Platform, Pressable, SafeAreaView, Button, FlatList, StatusBar ,Modal} from 'react-native'
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useCallback, useState, useRef } from 'react';
import { useForm, useFormContext } from 'react-hook-form';
import SegmentedControl from '@react-native-segmented-control/segmented-control';

import { Alert } from 'react-native';

import * as ImagePicker from 'expo-image-picker';
import UserAvatar from 'react-native-user-avatar';
import TextFieldGroup from '../components/TextFieldGroup';
import CustomSelect from '../components/CustomSelect';
import actions from '../../redux/actions';
import { addEmployee, fetchEmployeeSeqNumber, updateEmployee } from '../../store/employee/employeeThunk';
import { useDispatch, useSelector } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import moment from 'moment';
import { Checkbox, Portal } from 'react-native-paper';
import MultiSelect from '../components/MultiSelect';
import SelectDropdown from 'react-native-select-dropdown';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
import { SceneMap, TabView } from 'react-native-tab-view';
import Animated from 'react-native-reanimated';
import CheckBox from 'react-native-check-box';
import SignatureCanvas from 'react-native-signature-canvas';
import SignatureScreen from '../wishlist';
import Divider from '../../components/Divider';
import * as DocumentPicker from 'expo-document-picker';
import { addDoc } from '../../store/docAttach/docAttachThunk';

import { ALERT_TYPE, Dialog } from 'react-native-alert-notification';

export default function AddEmployee({ route, navigation }) {


// const { docs } = useAppSelector(state => state.docAttach);


// attachments
const [fetchDocs, setFetchDocs] = useState('');
const [docData, setDocData] = useState([]);

// const navigation = useNavigation();
const [signModel, setSignModel] = useState(false);
const [tab2, setTab2] = useState(0);
const [page, setPage] = useState(0);

// const moodDropdownRef = useRef();


const [gender, setGender] = useState(null);
const [dob, setDob] = useState(null);
const [isMarried, setIsMarried] = useState(false);
const [compRelation, setCompRelation] = useState(null);

const [emergencyContacts, setEmergencyContacts] = useState([]);
const [dependents, setDependents] = useState([]);
const [education, setEducation] = useState([]);
const [prevEmployer, setPrevEmployer] = useState([]);

const [joinDate, setJoinDate] = useState(null);
const [resignDate, setResignDate] = useState(null);

const [client, setClient] = useState(null);
const [baseLocation, setBaseLocation] = useState(null);
const [addresses, setAddresses] = useState([]);

const [isCompliance, setIsCompliance] = useState(false);

const [bankPhoto, setBankPhoto] = useState(null);
const [aadharCard, setAadharCard] = useState(null);
const [panCard, setPanCard] = useState(null);
const [passbook, setPassbook] = useState(null);
const [pvc, setpvc] = useState(null);
const [bvc, setbvc] = useState(null);
const [signatureImage, setSignatureImage] = useState(null);

const [ship, setShip] = useState(false);



const [otherKYCDetails, setOtherKYCDetails] = useState([]);




const items = [
    { label: 'Hindi', value: 'hindi' },
    { label: 'English', value: 'english' },
    { label: 'Marathi', value: 'marathi' },
    { label: 'Kannada', value: 'kannada' },
    { label: 'Telugu', value: 'telugu' },
    { label: 'Malayalm', value: 'malayalm' },
    { label: 'Gujarati', value: 'gujarati' },
    { label: 'Punjabi', value: 'punjabi' },
];

const relations = [
    { label: 'Father', value: 'father' },
    { label: 'Mother', value: 'mother' },
    { label: 'Daughter', value: 'daughter' },
    { label: 'Son', value: 'son' },
    { label: 'Husband', value: 'husband' },
    { label: 'Wife', value: 'wife' },
    { label: 'Brother', value: 'brother' },
    { label: 'Sister', value: 'sister' },
    { label: 'Grandfather', value: 'grandfather' },
    { label: 'Grandmother', value: 'grandmother' },
    { label: 'Grandson', value: 'grandson' },
    { label: 'Uncle', value: 'uncle' },
    { label: 'Aunt', value: 'aunt' },
    { label: 'Nephew', value: 'nephew' },
    { label: 'Niece', value: 'niece' },
    { label: 'Cousin', value: 'cousin' },
    { label: 'Others', value: 'others' },

];

const genderOptions = [
    { label: 'Male', value: 'male' },
    { label: 'Female', value: 'female' },
    { label: 'Other', value: 'other' },
];

const [error, setErrors] = useState([]);

const [language, setLanguage] = useState([]);
const [uniform, setUniform] = useState([]);
// const [data1, setData1] = useState({ label: 'Hindi', value: 'hindi' });

const [image, setImage] = useState(null);

const [isLoading , setIsLoading] = useState(false);
const [attachments , setAttachments] = useState([]);
const [deleteDocs , setDeleteDocs] = useState([]);

const pickImage = async (img, type) => {
    // No permissions request is necessary for launching the image library
    let result;
    if (type === 'photo') {
        result = await ImagePicker.launchCameraAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [1, 1],
            quality: 1,
            presentationStyle:''
        });
    } else {
        result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [1, 1],
            quality: 1,
        });
    }

    console.log(result);
    const fileObj = {
        name: result.assets[0].fileName,
        uri: result.assets[0].uri,
        type: result.assets[0].mimeType, 
        size: result.assets[0].fileSize
    }

    if (!result.canceled) {
        if (img === 'img') setImage(fileObj);
        // else if (img === 'sign') setSignatureImage(fileObj);
        // else if (img === 'bank') setBankPhoto(fileObj);
    }
};

const [termsAndConditionPhoto, setTermsAndConditionPhoto] = useState(null);
const [bgvConsentPhoto, setBgvConsentPhoto] = useState(null);
const [thumbPhoto, setThumbPhoto] = useState(null);

            // type: "*/*", // all files
            // type: "image/*" // all images files
            // type: "audio/*" // all audio files
            // type: "application/*", // for pdf, doc and docx
            // type: "application/pdf", // .pdf
            // type: "application/msword" // .doc
            // type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" // .docx
            // type: "vnd.ms-excel" // .xls
            // type: "vnd.openxmlformats-officedocument.spreadsheetml.sheet" // .xlsx
            // type: "text/csv" // .csv


// const pickFile = async (type) => {
//     try {
//         let result = await DocumentPicker.getDocumentAsync({
//             type: "application/*", // for pdf, doc and docx
//             copyToCacheDirectory: false
//         });
//         const fileObj = {
//             name: result.assets[0].name,
//             uri: result.assets[0].uri,
//             type: result.assets[0].mimeType, 
//             size: result.assets[0].size
//         }

//         if (type === 't&c') {
//             if (termsAndConditionPhoto?.id)  {
//                 setAttachments(attachments.filter(e => e !== termsAndConditionPhoto.id))
//                 setDeleteDocs([...deleteDocs, termsAndConditionPhoto.id])
//             }
//             setTermsAndConditionPhoto({ data: fileObj, name: fileObj.name});
//         }
//         else if (type === 'bgv') {
//             if (bgvConsentPhoto?.id)  {
//                 setAttachments(attachments.filter(e => e !== bgvConsentPhoto.id))
//                 setDeleteDocs([...deleteDocs, bgvConsentPhoto.id])
//             }
//             setBgvConsentPhoto({ data: fileObj, name: fileObj.name});
//         }
//         else if (type === 'thumb') {
//             if (thumbPhoto?.id)  {
//                 setAttachments(attachments.filter(e => e !== thumbPhoto.id))
//                 setDeleteDocs([...deleteDocs, thumbPhoto.id])
//             }
//             setThumbPhoto({ data: fileObj, name: fileObj.name});
//         }
//     } catch (err) {
//         if (DocumentPicker.isCancel(err)) {
//             console.log(err);
//             // User cancelled the picker, exit any dialogs or menus and move on
//         } else {
//             throw err;
//         }
//     }
// };

// const pickImageFile = async (img) => {
//     try {
//         let result = await DocumentPicker.getDocumentAsync({
//             type: "image/*" ,// all images files
//             copyToCacheDirectory: false
//         });
//         const fileObj = {
//             name: result.assets[0].name,
//             uri: result.assets[0].uri,
//             type: result.assets[0].mimeType, 
//             size: result.assets[0].size
//         }
//         if (img === 'bank') {
//             if (bankPhoto?.id)  {
//                 setAttachments(attachments.filter(e => e !== bankPhoto.id))
//                 setDeleteDocs([...deleteDocs, bankPhoto.id])
//             }
//             setBankPhoto({ data: fileObj, name: fileObj.name});
//         }
//         if (img === 'aadhar') {
//             if (aadharCard?.id)  {
//                 setAttachments(attachments.filter(e => e !== aadharCard.id))
//                 setDeleteDocs([...deleteDocs, aadharCard.id])
//             }
//             setAadharCard({ data: fileObj, name: fileObj.name});
//         }
//         else if (img === 'pan') {
//             if (panCard?.id)  {
//                 setAttachments(attachments.filter(e => e !== panCard.id))
//                 setDeleteDocs([...deleteDocs, panCard.id])
//             }
//             setPanCard({ data: fileObj, name: fileObj.name});
//         }
//         else if (img === 'passbook') {
//             if (passbook?.id)  {
//                 setAttachments(attachments.filter(e => e !== passbook.id))
//                 setDeleteDocs([...deleteDocs, passbook.id])
//             }
//             setPassbook({ data: fileObj, name: fileObj.name});
//         }
//         else if (img === 'bvc') {
//             if (bvc?.id)  {
//                 setAttachments(attachments.filter(e => e !== bvc.id))
//                 setDeleteDocs([...deleteDocs, bvc.id])
//             }
//             setbvc({ data: fileObj, name: fileObj.name});
//         }
//         else if (img === 'pvc') {
//             if (pvc?.id)  {
//                 setAttachments(attachments.filter(e => e !== pvc.id))
//                 setDeleteDocs([...deleteDocs, pvc.id])
//             }
//             setpvc({ data: fileObj, name: fileObj.name});
//         }
//     } catch (err) {
//         if (DocumentPicker.isCancel(err)) {
//             console.log(err);
//             // User cancelled the picker, exit any dialogs or menus and move on
//         } else {
//             throw err;
//         }
//     }
// };






const pickFile = async (documentType) => {
    try {
        let result = await DocumentPicker.getDocumentAsync({
            type: "application/*",
            copyToCacheDirectory: false
        });
        const fileObj = {
            name: result.assets[0].name,
            uri: result.assets[0].uri,
            type: result.assets[0].mimeType,
            size: result.assets[0].size
        };

        switch (documentType) {
            case 'terms':
                if (termsAndConditionPhoto?.id) {
                    setAttachments(attachments.filter(e => e !== termsAndConditionPhoto.id));
                    setDeleteDocs([...deleteDocs, termsAndConditionPhoto.id]);
                }
                setTermsAndConditionPhoto({ data: fileObj, name: fileObj.name });
                break;
            case 'bgv':
                if (bgvConsentPhoto?.id) {
                    setAttachments(attachments.filter(e => e !== bgvConsentPhoto.id));
                    setDeleteDocs([...deleteDocs, bgvConsentPhoto.id]);
                }
                setBgvConsentPhoto({ data: fileObj, name: fileObj.name });
                break;
            case 'thumb':
                if (thumbPhoto?.id) {
                    setAttachments(attachments.filter(e => e !== thumbPhoto.id));
                    setDeleteDocs([...deleteDocs, thumbPhoto.id]);
                }
                setThumbPhoto({ data: fileObj, name: fileObj.name });
                break;
        }
    } catch (err) {
        if (DocumentPicker.isCancel(err)) {
            console.log("User cancelled the picker");
        } else {
            throw err;
        }
    }
};
const pickoImage = async (documentType, sourceType) => {
let result;
if (sourceType === 'photo') {
result = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
} else if (sourceType === 'gallery') {
result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
} else if (sourceType === 'file') {
result = await DocumentPicker.getDocumentAsync({
type: ["image/*", "application/pdf"],
copyToCacheDirectory: false
});
}


if (!result.canceled) {
    const fileObj = {
        name: result.assets[0].fileName || result.assets[0].name,
        uri: result.assets[0].uri,
        type: result.assets[0].mimeType,
        size: result.assets[0].fileSize
    };

    switch (documentType) {
        case 'aadhar':
            setAadharCard({ data: fileObj, name: fileObj.name, type: fileObj.type });
            break;
        case 'pan':
            setPanCard({ data: fileObj, name: fileObj.name, type: fileObj.type });
            break;
        case 'passbook':
            setPassbook({ data: fileObj, name: fileObj.name, type: fileObj.type });
            break;
        case 'pvc':
            setpvc({ data: fileObj, name: fileObj.name, type: fileObj.type });
            break;
        case 'bvc':
            setbvc({ data: fileObj, name: fileObj.name, type: fileObj.type });
            break;
    }
}
};


const {
    control,
    handleSubmit,
    formState: { errors },
    setValue,
    trigger,
    getValues
} = useForm();


useEffect(() => {
    setBankPhoto(null);
    setAadharCard(null);
    setPanCard(null);
    setPassbook(null);
    setpvc(null);
    setbvc(null);
    setSignatureImage(null);
    if (route.params.id) {
        setIsLoading(true);
        navigation.setOptions({ headerTitle: 'Edit Employee'})
        getEmployee();
    } else {
        getEmpId()
    }
}, [])

const getEmpId = async () => {
    await dispatch(fetchEmployeeSeqNumber(`${'Employee'}`)).then(async (data) => {
      if (data.payload) {
        setValue("empId", data.payload.employeeNumber);
      } 
    }).catch(e => {
      // console.log(e);
    });
};

const photoOptions = [
    {
        label: 'View Profile Photo',
        icon: 'eye',
        color: '#1da861',
        action: () => pickImage('img', 'photo')
    },
    {
        label: 'Open Camera',
        icon: 'frame',
        color: '#1da861',
        action: () => pickImage('img', 'photo')
    },
    {
        label: 'Choose from Galary',
        icon: 'picture',
        color: '#1da861',
        action: () => pickImage('img', 'camera')
    },
    {
        label: 'Remove Profile Photo',
        icon: 'minus',
        color: '#dc3545',
        action: () => setImage(null)
    }
]


const getDocumentOptions = (documentType, setDocumentFunction) => [
    {
        label: 'Open Camera',
        icon: 'camera',
        color: '#1da861',
        action: () => pickImage(documentType, 'photo')
    },
    {
        label: 'Choose from Gallery',
        icon: 'image',
        color: '#1da861',
        action: () => pickImage(documentType, 'gallery')
    },
    {
        label: 'Choose File',
        icon: 'file',
        color: '#1da861',
        action: () => pickFile(documentType)
    },
    {
        label: `Remove ${documentType}`,
        icon: 'minus',
        color: '#dc3545',
        action: () => setDocumentFunction(null)
    }
];

const pickDocument = async (documentType, sourceType) => {
    let result;
    if (sourceType === 'camera') {
        result = await ImagePicker.launchCameraAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });
    } else if (sourceType === 'gallery') {
        result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });
    } else if (sourceType === 'file') {
        result = await DocumentPicker.getDocumentAsync({
            type: ["image/*", "application/pdf"],
            copyToCacheDirectory: false
        });
    }

    if (!result.canceled) {
        const fileObj = {
            name: result.assets ? result.assets[0].fileName : result.name,
            uri: result.assets ? result.assets[0].uri : result.uri,
            type: result.assets ? result.assets[0].mimeType : result.mimeType,
            size: result.assets ? result.assets[0].fileSize : result.size
        };

        switch (documentType) {
            case 'aadhar':
                setAadharCard(fileObj);
                break;
            case 'pan':
                setPanCard(fileObj);
                break;
            case 'passbook':
                setPassbook(fileObj);
                break;
            case 'pvc':
                setpvc(fileObj);
                break;
            case 'bvc':
                setbvc(fileObj);
                break;
        }
    }
};


const setClientData = async (id) => {
    const selectedClient = await actions.fetchCounterPartyAccountById(id);
    if (selectedClient) setClient(selectedClient);
}

const getEmployee = async () => {
    try {
        const res = await actions.employeeById(route.params.id);
        
        setImage(res.photo);
        setValue("empId", res.empId);
        setValue("firstName", res.name.split(' ')[0]);
        setValue("lastName", res.name.split(' ')[1]);

        if (res.gender) setGender({ label: res.gender === 'male' ? 'Male' : res.gender === 'female' ? 'Female' : 'other', value: res.gender });
        // setGender(res.gender === 'male' ? 0 : res.gender === 'female' ? 1 : res.gender === 'other' ? 2 : null);
        setDob(res.dob);

        setClient(res.client);

        // let lang = []
        // res.languages.map(a => lang.push({ label: a, value: String(a).toLocaleLowerCase() }));

        // alert(JSON.stringify(lang));
        setLanguage([...res.languages]);

        // console.log(res.emergencyPhones);
        // console.log(res.uniform);

        if(res.uniform?.length > 0) {
            setUniform(res.uniform);
        }

        // setClientData(res.client._id);

        let address = []
        if(res.client?.addresses?.length > 0) {
            res.client.addresses.map(a => address.push({ label: `${a?.line1 && a?.line1 + ', '}${a?.line2 && a?.line2 + ', '}${a?.city && a?.city + ', '}${a?.state && a?.state + ', '}${a?.code}`, value: a._id }));
            setAddresses(address);
        }


        setValue("personalEmail", res.personalEmail);
        // setValue("businessEmail", res.businessEmail);
        setValue("primaryPhone", res.primaryPhone);
        if(res.alternatePhone !== "undefined") setValue("alternatePhone", res.alternatePhone);
        // setValue("isAlternatePhoneVerified", res.isAlternatePhoneVerified);
        // setValue("alternatePhoneRelation", res.alternatePhoneRelation);

        setValue("fatherName", res.fatherName);
        setValue("motherName", res.motherName);
        setIsMarried(res.isMarried);
        if(res.spouseName !== "undefined") setValue("spouseName", res.spouseName);
        if(res.spousePhone !== "undefined") setValue("spousePhone", res.spousePhone);
        if(res.bankLinkPhone !== "undefined") setValue("bankLinkPhone", res.bankLinkPhone);


        setValue("presentAddress", res.presentAddress);
        setValue("permanentAddress", res.permanentAddress);

        setEmergencyContacts(res.emergencyPhones);
        setDependents(res.dependents);
        setEducation(res.education);
        setPrevEmployer(res.prevEmployment);

        // setValue("languages", res.languages);
        // setLanguage(res.languages);

        setValue("grossSalary", res.salary[0].grossSalary);
        setValue("ctc", res.salary[0].ctc);
        setValue("assessmentYear", res.salary[0].assessmentYear);
        setJoinDate(res.dateOfJoining);
        setResignDate(res.dateofResign)
        // setValue("startDate", res.salary[0].startDate);
        // setValue("endDate", res.salary[0].endDate);
        // setValue("isActiveSalary", res.salary[0].active);
        setValue("reasonOfResign", res.reasonOfResign);

        setIsCompliance(res.isCompliance);
        setValue("nomineeName", res.nomineeName);
        if (res.nomineeRelation) setCompRelation({ label: res.nomineeRelation.substring(0, 1).toUpperCase() + res.nomineeRelation.substring(1), value: res.nomineeRelation })
        // setValue("nomineeRelation", res.nomineeRelation);

        // setValue("bankLinkPhone", res.bankLinkPhone);
        // setEmployee([...res.employees]);

        // setAadharCard(res.aadhar);
        // setPanCard(res.tinPan);
        // setPassbook(res.passbook);
        // setpvc(res.pvc);
        // setbvc(res.bvc);
        setSignatureImage(res.signature);
        if(res.attachments) {
            setAttachments(res.attachments.map(e => e._id));
            res.attachments.map(file => {
                if(file.fieldName) {
                    if(file.fieldName === 'termsAndConditionPhoto') setTermsAndConditionPhoto({data: null, name: file.originalname, id:file._id})
                    if(file.fieldName === 'bgvConsentPhoto') setBgvConsentPhoto({data: null, name: file.originalname, id:file._id})
                    if(file.fieldName === 'thumbPhoto') setThumbPhoto({data: null, name: file.originalname, id:file._id})

                    if(file.fieldName === 'aadharCard') setAadharCard({data: null, name: file.originalname, url: file.url , id:file._id})
                    if(file.fieldName === 'pvc') setpvc({data: null, name: file.originalname, url: file.url, id:file._id })
                    if(file.fieldName === 'bvc') setbvc({data: null, name: file.originalname, url: file.url, id:file._id })
                    if(file.fieldName === 'panCard') setPanCard({data: null, name: file.originalname, url: file.url , id:file._id})
                    if(file.fieldName === 'passbook') setPassbook({data: null, name: file.originalname, url: file.url, id:file._id })
                }
            })
        }
        // setThumbPhoto(res.thumbPhoto);
        // setBgvConsentPhoto(res.bgvConsentPhoto);
        // if(res.termsAndConditionPhoto) {
        //     res.termsAndConditionPhoto.name = res.termsAndConditionPhoto.originalname
        //     setTermsAndConditionPhoto(res.termsAndConditionPhoto);
        // }

        // let _selectedClient = await dispatch(fetchCounterPartyAccountById(res.client._id));
        // setSelectedClient(_selectedClient.payload);

        // setSelectedOption(res.client._id);
        // setSelected(res.client);

        // methods.setValue("baseLocation", res.baseLocation._id);
        if(res.baseLocation) {
            setBaseLocation({ label: `${res.baseLocation?.line1 && res.baseLocation?.line1 + ', '}${res.baseLocation?.line2 && res.baseLocation?.line2 + ', '}${res.baseLocation?.city && res.baseLocation?.city + ', '}${res.baseLocation?.state && res.baseLocation?.state + ', '}${res.baseLocation?.code}`, value: res.baseLocation?._id });
        }
        setIsLoading(false);
    } catch (err) {
        if (err) {
            console.log(err);
        }
    }
}

const userData = useSelector((state) => state.auth.userData);

const dispatch = useDispatch();

const getFormData = (object) => {
    var newform = new FormData();
    Object.keys(object).forEach(key => {
        // newform.append(key, JSON.stringify(object[key]))
        if (Array.isArray(object[key])) {
            newform.append(key, JSON.stringify(object[key]));
        } else {
            newform.append(key, object[key]);
        }
    });
    return newform;
};

const handleClient = (myclient) => {
    setClient(myclient);
    setBaseLocation(null);
    let address = []
        if(myclient?.addresses?.length > 0) {
            myclient.addresses.map(a => address.push({ label: `${a?.line1 && a?.line1 + ', '}${a?.line2 && a?.line2 + ', '}${a?.city && a?.city + ', '}${a?.state && a?.state + ', '}${a?.code}`, value: a._id }));
            setAddresses(address);
        }
}

const AddEmployee = async (values) => {
    if (!dob || !gender || (language.length <= 0) || !baseLocation || !client || (page === 2 && !compRelation && isCompliance)) {
        let errdata = []
        if (!dob) errdata.push('dob');
        if (!gender) errdata.push('gender');
        if (!client) errdata.push('client');
        if (!baseLocation) errdata.push('baselocation');
        if (language.length <= 0) errdata.push('lang');
        if (isCompliance) if (!compRelation) errdata.push('compRelation');
        setErrors([...error, ...errdata]);
    } else {
        if (page === 2) {

            try {
                values.isMarried = isMarried;
                // values.empId = "yhgtd";
                values.account = userData.user.accounts[0]._id;
                // values.isPrevEmployment = ;

                values.gender = gender.value;
                values.baseLocation = baseLocation.value;
                values.languages = language;
                // values.gender = gender === 0 ? 'male' : gender === 1 ? 'female' : gender === 2 ? 'other' : null;
                values.emergencyPhones = emergencyContacts;
                values.dependents = dependents;
                values.education = education;
                values.prevEmployment = prevEmployer;
                values.uniform = uniform;
                if(joinDate) values.dateOfJoining = String(joinDate);
                if(resignDate) values.dateofResign = String(resignDate);

                values.isCompliance = isCompliance;
                values.salary = [{
                    grossSalary: values.grossSalary,
                    ctc: values.ctc,
                    assessmentYear: values.assessmentYear,
                    startDate: joinDate && String(joinDate),
                    endDate: resignDate && String(resignDate)
                }];
                if(compRelation) values.nomineeRelation = compRelation?.value;

                let formData = getFormData(values);

                formData.append('name', values.firstName + ' ' + values.lastName);
                formData.append('photo', image);
                formData.append('dob', String(dob));
                formData.append('client', client._id);

                // const uniformData = {
                //     items: uniform
                // };
                // formData.append('uniform', JSON.stringify(uniformData));

                if(signatureImage) formData.append('signature', signatureImage);
                // formData.append('bank', client._id);
                // if(aadharCard) formData.append('aadhar', aadharCard);
                // if(panCard) formData.append('tinPan', panCard);
                // if(passbook) formData.append('passbook', passbook);
                // if(pvc) formData.append('pvc', pvc);
                // if(bvc) formData.append('bvc', bvc);

                // if(thumbPhoto) formData.append('thumbPhoto', thumbPhoto);
                // if(termsAndConditionPhoto) formData.append('termsAndConditionPhoto', termsAndConditionPhoto);
                // if(bgvConsentPhoto) formData.append('bgvConsentPhoto', bgvConsentPhoto);


                await DeleteDocs(deleteDocs);

                const fileData = await UploadAllFiles(); 

                const myFiles = [...attachments, ...fileData];

                if(fileData.length > 0) formData.append('attachments', JSON.stringify(myFiles));

                // const res = await actions.createEmployee(data);
                if (!route.params.id) {
                    await dispatch(addEmployee(formData)).unwrap().then(async (res) => {
                        if (res) {
                            route.params.refresh();
                            navigation.goBack();
                            showSuccessDialog('Employee created successfully!');
                            // Alert.alert('Success', 'Employee created successfully!', [
                            //     { text: 'OK', onPress: () => console.log('OK Pressed') },
                            //   ]);
                        }
                    });
                } else {
                    // alert(JSON.stringify(formData));
                    await dispatch(updateEmployee({ id: route.params.id, employeePayload: formData })).unwrap().then(async (res) => {
                        if (res) {
                            // route.params.refresh();
                            navigation.goBack();
                            showSuccessDialog('Employee updated successfully!');
                            // Alert.alert('Success', 'Employee data updated successfully!', [
                            //     { text: 'OK', onPress: () => console.log('OK Pressed') },
                            //   ]);
                    
                        }
                    });
                    // await actions.updateEmployee(route.params.id,formData).then(async (res) => {
                    //     if (res) {
                    //         route.params.refresh();
                    //         navigation.goBack();
                    //     }
                    // });
                }
            } catch (err) {
                if (err) {
                    console.log(err);
                }
            }
        } else {
            if (page < 2) {
                setPage(page + 1)
            }
        }
    }
}


const showSuccessDialog = (message) => {
    Dialog.show({
        type: ALERT_TYPE.SUCCESS,
        title: 'Success',
        textBody: message,
        button: 'Close',
    });
};



const UploadAllFiles = async () => {
    const fileOptions = [
        { fileObj: termsAndConditionPhoto?.data, objName: 'termsAndConditionPhoto' },
        { fileObj: bgvConsentPhoto?.data, objName: 'bgvConsentPhoto' },
        { fileObj: thumbPhoto?.data, objName: 'thumbPhoto' },
        { fileObj: pvc?.data, objName: 'pvc' },
        { fileObj: bvc?.data, objName: 'bvc' },
        { fileObj: aadharCard?.data, objName: 'aadharCard' },
        { fileObj: panCard?.data, objName: 'panCard' },
        { fileObj: passbook?.data, objName: 'passbook' },
    ];

    const attachmentsData = await Promise.all(
        fileOptions.map(async (file) => {
          const fileId = await UploadFile(file.fileObj, file.objName);
          if(fileId) return fileId;
          else return null;
        })
      );
    
    return attachmentsData.filter(e=> e !== null);;
};

const UploadFile = async (dataObj, objName) => {
    if(dataObj) {
        const fileForm = new FormData();
        fileForm.append('attachment', dataObj);
        let fileResObj = await actions.uploadDoc(fileForm,String(objName));
        if (fileResObj?.message === 'Success! Attachment created!') {
            return fileResObj?.doc?._id;
        } 
    }
}

const DeleteDocs = async (ids) => {
    if(ids && ids.length > 0) {
        ids.map(async (id) => {
            await actions.deleteDoc(id);
            // if (fileResObj?.message === 'Success! Attachment created!') {
            //     return fileResObj?.doc?._id;
            // } 
        })
    }
}

const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
    { key: 'first', title: 'CONTACT' },
    { key: 'second', title: 'FAMILY' },
    { key: 'third', title: 'ADDRESS' },
]);

const FirstRoute = () => (
    <View key={1} style={{ flex: 1,height:300, backgroundColor: '#ff4081' }} >
        <Text>jhvhjvhj</Text>
    </View>
  );
  
  const SecondRoute = () => (
    <View key={2} style={{ flex: 1,height:300, backgroundColor: '#673ab7' }} />
  );

  const ThirdRoute = () => (
    <View key={3} style={{ flex: 1,height:300, backgroundColor: '#673ab7' }} />
  );
  
  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
    third: ThirdRoute
  });

_renderTabBar = (props) => {
    const inputRange = props.navigationState.routes.map((x, i) => i);

    return (
        <View style={[styles.tabBar, { borderBottomColor: '#c7c7c9', borderBottomWidth: 0.2, paddingTop: 5 }]}>

            <View className='flex flex-row absolute right-[2] top-[4]' >
                {index === 0 ? '' : <TouchableOpacity className='mr-[7]' onPress={() => setIndex(index - 1)}>
                    <SimpleLineIcons name='arrow-left-circle' color={'#1da861'} size={21} />
                </TouchableOpacity>}

                {index === 2 ? '' : <TouchableOpacity onPress={() => setIndex(index + 1)}>
                    <SimpleLineIcons name='arrow-right-circle' color={'#1da861'} size={21} />
                </TouchableOpacity>}
            </View>

            {props.navigationState.routes.map((route, i) => {
                //   const opacity = props.position.interpolate({
                //     inputRange,
                //     outputRange: inputRange.map((inputIndex) =>
                //     inputIndex === i ? 1 : 0.5
                //     ),
                //   });

                return (
                    <TouchableOpacity key={i}
                        style={{ flex: 1, alignItems: 'center' }}
                        onPress={() => setIndex(i)}>
                        <Animated.Text className="[font-family:'Poppins-Medium'] text-[13px] tracking-wide" style={{ color: index === i ? '#1da861' : "#8e8e8e", borderBottomColor: '#1da861', borderBottomWidth: index === i ? 2 : 0, paddingBottom: 6 }}>{route.title}</Animated.Text>
                    </TouchableOpacity>
                );
            })}
        </View>
    );
};

const [index1, setIndex1] = React.useState(0);
const [routes1] = React.useState([
    { key: 'one', title: 'EDUCATION' },
    { key: 'two', title: 'EMPLOYMENT' },
]);

_renderTabBar1 = (props) => {

    return (
        <View style={[styles.tabBar, { borderBottomColor: '#c7c7c9', borderBottomWidth: 0.2, paddingTop: 5, paddingRight: '35%' }]}>

            <View className='flex flex-row absolute right-[2] bottom-[6]' >
                {index1 === 0 ? '' : <TouchableOpacity className='mr-[7]' onPress={() => setIndex1(index1 - 1)}>
                    <SimpleLineIcons name='arrow-left-circle' color={'#1da861'} size={21} />
                </TouchableOpacity>}

                {index1 === 1 ? '' : <TouchableOpacity onPress={() => setIndex1(index1 + 1)}>
                    <SimpleLineIcons name='arrow-right-circle' color={'#1da861'} size={21} />
                </TouchableOpacity>}
            </View>

            {props.navigationState.routes.map((route, i) => {
                return (
                    <TouchableOpacity
                        style={{ flex: 1, alignItems: 'center' }}
                        onPress={() => setIndex1(i)}>
                        <Animated.Text className="[font-family:'Poppins-Medium'] text-[13px] tracking-wide" style={{ color: index1 === i ? '#1da861' : "#8e8e8e", borderBottomColor: '#1da861', borderBottomWidth: index1 === i ? 2 : 0, paddingBottom: 6 }}>{route.title}</Animated.Text>
                    </TouchableOpacity>
                );
            })}
        </View>
    );
};

useEffect(() => {
    if (ship) setValue("permanentAddress", getValues('presentAddress'));
}, [ship])

return (
    <>
        {/* <View className='flex flex-row top-0 w-full bg-[#ebe9f1] pl-4'>
        <Ionicons name="person-circle-outline" size={33} color="#888" style={{marginTop:10}}/> 
            
            <Text className=" [font-family:'Poppins-SemiBold'] text-[20px] p-3 pl-2 pb-2">
            
            {route.params.id ? 'Update Employee' : 'Add Employee'}
            </Text>
            <TouchableOpacity
                onPress={() => navigation.goBack()}
                style={{position: "absolute", top: 10, right: 15 ,width:35,height:35,backgroundColor:'#e2e0ec',borderRadius:25,alignItems:'center',justifyContent:'center'}}
            >
                <Ionicons name="close" size={20} color="#888" />
            </TouchableOpacity>
        </View> */}

        <View className='flex flex-row top-0 w-full bg-[#ebe9f1] pl-4 pt-7'>
            {/* <Ionicons name="person-circle-outline" size={33} color="#888" style={{marginTop:10}}/> */}
            <TouchableOpacity
                onPress={() => navigation.goBack()}
                style={{width:35,height:35,backgroundColor:'#e2e0ec',borderRadius:25,marginTop:10,alignItems:'center',justifyContent:'center'}}
            >
                <Ionicons name="arrow-back" size={20} color="#888" />
            </TouchableOpacity> 
            
            <Text className=" [font-family:'Poppins-SemiBold'] text-[20px] p-3 pl-2 pb-2">
            
            {route.params.id ? 'Update Employee' : 'Add Employee'}
            </Text>
        </View>
        
        <ScrollView className='w-full h-full bg-[#f3f2f7]' 
        // nestedScrollEnabled={true} directionalLockEnabled={true}
        >
            <View className="bg-white flex flex-row justify-center item-center w-full h-full">
            {!isLoading && 
                <View className="bg-white w-full h-full relative bg-[#f3f2f7] pt-0">

                    {/* //header this side asap */}


                    <View className=" p-3 pt-0 ">


                        <View className="p-2 pt-0">

                            {/* <Text className="mt-2 text-center [font-family:'Poppins-Regular'] tracking-wider text-[13px] pl-[15]  w-full color-[#8e8e8e]">
                                EMPLOYEE ID: EMPXX1234
                            </Text> */}
                            <TextFieldGroup title={'Employee Id'}
                                data={[{
                                    title: "Employee Id",
                                    name: "empId",
                                    type: "text",
                                    control: control,
                                    rules: {
                                        required: true
                                    },
                                    label: false,
                                    readOnly: true
                                }]}
                            />

                            <View className="flex flex-row">

                                <SelectDropdown
                                    // ref={moodDropdownRef}
                                    data={image ? photoOptions : photoOptions.slice(1, 3)}
                                    disableAutoScroll
                                    dropdownOverlayColor='rgba(0,0,0,0.1)'
                                    onSelect={(selectedItem, index) => {
                                        selectedItem.action();
                                        // moodDropdownRef.current.reset();
                                    }}
                                    renderButton={(selectedItem, isOpen) => {
                                        return (
                                            <View className="w-[35%]" style={styles.container2}>
                                                {image ? 
                                                <Image style={styles.profilePic}
                                                    source={{uri:image?.uri ? image.uri : image}}
                                                /> :
                                                <UserAvatar size={80} 
                                                    name={getValues('firstName')+' '+getValues('lastName')}
                                                    bgColors={['#dbdbe3', '#d0d1d6', '#c9cacf']}
                                                    // src="https://staging-ibook.s3.ap-south-1.amazonaws.com/660a659ce39738a30577ef99/documents/1716751147701_0_9483207587823161.jpeg"
                                                />}
                                            </View>
                                        );
                                    }}
                                    renderItem={(item, index, isSelected) => {
                                        return (
                                            <View key={index} style={[styles.dropdown2ItemStyle, index === photoOptions.length - 1 ? { borderBottomWidth: 0 } : {}]}>
                                                <Text className="[font-family:'Poppins-Regular']" style={[styles.dropdown2ItemTxtStyle, { color: item.color,marginBottom:-5 }]}>{item.label}</Text>
                                                <SimpleLineIcons name={item.icon} size={16} color={item.color} />
                                            </View>
                                        );
                                    }}
                                    dropdownStyle={styles.dropdown2MenuStyle}
                                    showsVerticalScrollIndicator={false}
                                />

                                {/* <View className="w-[35%] pt-4" style={styles.container2}>
                                    <Pressable onPress={() => pickImage('img')}>
                                        <UserAvatar size={80} name="John Doe" bgColors={['#dbdbe3', '#d0d1d6', '#c9cacf']}
                                            src={image}
                                        />
                                    </Pressable>
                                </View> */}


                                <View className="w-[65%]">
                                    <TextFieldGroup
                                        data={[{
                                            title: "First Name",
                                            name: "firstName",
                                            type: "text",
                                            control: control,
                                            rules: {
                                                required: true
                                            }
                                            // label: true
                                        },
                                        {
                                            title: "Last Name",
                                            name: "lastName",
                                            type: "text",
                                            control: control,
                                            rules: {
                                                required: true
                                            }
                                            // label: true
                                        }]}
                                    />
                                </View>

                            </View>
                            <View>
                                {client ? <>
                                    <TextFieldGroup title={'Client'} />
                                    <View style={styles.row} className='rounded-[10px] p-0'>
                                        <View className="flex flex-row pt-2 pl-2 pr-2 mb-2" >
                                            <Image
                                                source={{
                                                    uri: !!client.logo ? client.logo : 'https://img.icons8.com/3d-fluency/94/user-male-circle.png',
                                                }}
                                                style={styles.pic}
                                            />
                                            <View style={{ width: '67%' }} className='ml-3'>
                                                <View style={styles.nameContainer}>
                                                    <Text style={{ fontSize: 14 }} className={`[font-family:'Poppins-Regular']`}>{client.name}</Text>
                                                </View>
                                                <Text style={{ fontSize: 12, color: '#666' }} className={`[font-family:'Poppins-Regular']`}>
                                                    {client.contactName} {client.email && ('|' + client.email)} {client.whatsAppNumber && ('|' + client.whatsAppNumber)}
                                                </Text>
                                            </View>
                                            <TouchableOpacity className='mt-1'
                                                onPress={() => navigation.navigate('ClientList', { client: client, setClient: handleClient })}
                                                style={{width:35,height:35,backgroundColor:'#f2f2f2',borderRadius:25,alignItems:'center',justifyContent:'center'}}
                                            >
                                                <Ionicons name={'repeat'} color="#1da861" size={25} />
                                            </TouchableOpacity>

                                        </View>
                                        <Divider />
                                        <TextFieldGroup style={{ marginTop: 0 }} data={[{
                                            title: "Base Location",
                                            label: true,
                                            setValue: setBaseLocation,
                                            type: "select",
                                            value: baseLocation,
                                            rules: {
                                                required: true
                                            },
                                            // search: true,
                                            wfull: true,
                                            error: error.includes('baselocation'),
                                            data: addresses || []
                                        }]} />
                                    </View>
                                </> :
                                    <TouchableOpacity className='flex flex-row p-2 mt-4' style={{ backgroundColor:'#caf6df',borderWidth: error.includes('baselocation') ? 0.5: 0, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                        onPress={() => navigation.navigate('ClientList', { client: client, setClient: handleClient })}
                                    >
                                        <Text style={{ zIndex: 1 }} className='absolute  right-[8] top-1 color-[#dc3545]'>*</Text>
                                        <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add Client</Text>
                                        <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                    </TouchableOpacity>}
                            </View>

                            {page === 0 ?
                                <>

                                    <TextFieldGroup
                                        title={'General Details'}
                                        data={[
                                            {
                                                title: "Gender",
                                                data: genderOptions,
                                                value: gender,
                                                setValue: setGender,
                                                type: "select",
                                                rules: {
                                                    required: true
                                                },
                                                error: error.includes('gender'),
                                                label: true
                                            },
                                            {
                                                title: "Date of Birth",
                                                type: "date",
                                                value: dob,
                                                setValue: setDob,
                                                rules: {
                                                    required: true
                                                },
                                                error: error.includes('dob'),
                                                // show: ()=> {
                                                //     alert(dob);
                                                // },
                                                label: true
                                            },
                                            // {
                                            //     title: "Languages",
                                            //     type: "multiselect",
                                            //     setValue: setData,
                                            //     value: data,
                                            //     data: items
                                            // },
                                            // {
                                            //     title: "Languages",
                                            //     label: true,
                                            //     setValue: setData1,
                                            //     type: "select",
                                            //     value: data1,
                                            //     data: items
                                            // },
                                        ]}
                                    />

                                    <TextFieldGroup
                                        title={'Languages'}
                                        data={[
                                            {
                                                title: "Languages",
                                                type: "multiselect",
                                                setValue: setLanguage,
                                                value: language,
                                                data: items,
                                                // search: true,
                                                wfull: false,
                                                rules: {
                                                    required: true
                                                },
                                                error: error.includes('lang'),
                                                label: false
                                            }
                                        ]}
                                    />

                                    <View className='mt-5 mb-2' style={{flex:1}}>

                                    {/* <Portal> */}
                        {/* <Modalize
                        ref={customizeModalRef}
                        modalHeight={modalHeight}
                        >
                        <CustomizationModal 
                            modalHeight={modalHeight}
                        />
                        </Modalize>
                    </Portal> */}
                                        <TabView
                                            navigationState={{ index, routes }}
                                            renderTabBar={_renderTabBar}
                                            style={{flex:1}}
                                            // renderScene={renderScene} 
                                            renderScene={SceneMap({
                                                first: () => (<View key={0}>
                                                    <TextFieldGroup
                                                        title={'Contact Details'}
                                                        data={[
                                                            {
                                                                title: "Email",
                                                                name: "personalEmail",
                                                                control: control,
                                                                rules: {
                                                                    required: true,
                                                                    pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                                                                },
                                                                type: "text",
                                                                label: true,
                                                            },
                                                            {
                                                                title: "Phone 1",
                                                                name: "primaryPhone",
                                                                control: control,
                                                                rules: {
                                                                    required: true
                                                                },
                                                                type: "phone",
                                                                label: true,
                                                            },
                                                            {
                                                                title: "Phone 2",
                                                                name: "alternatePhone",
                                                                control: control,
                                                                rules: {
                                                                    required: false
                                                                },
                                                                type: "phone",
                                                                label: true,
                                                            }
                                                        ]}
                                                    />
                                                    <View>
                                                        <TextFieldGroup title={'Emergency Contacts'} />

                                                        {emergencyContacts.map(e =>
                                                            <View style={styles.row} className='flex flex-row rounded-[10px] mb-2'>
                                                                <View style={{ width: '90%' }}>
                                                                    <View style={styles.nameContainer} className='ml-1'>
                                                                        <Text style={styles.nameTxt} className="[font-family:'Poppins-Regular']">{e.name}</Text>
                                                                    </View>
                                                                    <Text style={styles.time} className="[font-family:'Poppins-Regular'] ml-1">
                                                                        {e.relation} | {e.phone}
                                                                    </Text>
                                                                </View>
                                                                <TouchableOpacity style={{ position: 'absolute', top: 10, right: 8 }}
                                                                    onPress={() => setEmergencyContacts(emergencyContacts.filter((obj) => obj.id !== e.id))}
                                                                >
                                                                    <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                                </TouchableOpacity>
                                                            </View>)}

                                                        {emergencyContacts.length >= 3 ? '' :
                                                            <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                                onPress={() => navigation.navigate('AutoCompleteList', {
                                                                    type: 0,
                                                                    setData: (record) => {
                                                                        const e_data = [...emergencyContacts];
                                                                        e_data.push({
                                                                            id: emergencyContacts.length + 1,
                                                                            ...record
                                                                        })
                                                                        setEmergencyContacts(e_data);
                                                                    },
                                                                })}
                                                            >
                                                                <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add</Text>
                                                                <Icon name="plus" size={16} color={"#1da861"} />
                                                            </TouchableOpacity>}
                                                    </View>
                                                </View>),
                                                second: () => (<View key={1}>
                                                    <TextFieldGroup
                                                        title={'Family Details'}
                                                        data={[
                                                            {
                                                                title: "Father Name",
                                                                name: "fatherName",
                                                                control: control,
                                                                rules: {
                                                                    required: true
                                                                },
                                                                type: "text",
                                                                label: true,
                                                            },
                                                            {
                                                                title: "Mother Name",
                                                                name: "motherName",
                                                                control: control,
                                                                rules: {
                                                                    required: true
                                                                },
                                                                type: "text",
                                                                label: true,
                                                            },
                                                            {
                                                                title: "Is Married",
                                                                type: "checkbox",
                                                                label: false,
                                                                value: isMarried,
                                                                setValue: setIsMarried,
                                                            }]}
                                                    />

                                                    <TextFieldGroup
                                                        title={'Spouse Details'}
                                                        visible={isMarried}
                                                        data={[
                                                            {
                                                                title: "Name",
                                                                name: "spouseName",
                                                                control: control,
                                                                rules: {
                                                                    required: isMarried
                                                                },
                                                                type: "text",
                                                                visible: true,
                                                                label: true,

                                                            },
                                                            {
                                                                title: "Phone",
                                                                name: "spousePhone",
                                                                control: control,
                                                                rules: {
                                                                    required: isMarried
                                                                },
                                                                type: "phone",
                                                                label: true,

                                                            }]}
                                                    />
                                                    <View>
                                                        <TextFieldGroup title={'Dependents'} />

                                                        {dependents.map(e =>
                                                            <View style={styles.row} className='flex flex-row rounded-[10px] mb-2'>
                                                                <View style={{ width: '90%' }}>
                                                                    <View style={styles.nameContainer} className='ml-1'>
                                                                        <Text style={styles.nameTxt} className="[font-family:'Poppins-Regular']">{e.full_name}</Text>
                                                                    </View>
                                                                    <Text style={styles.time} className="[font-family:'Poppins-Regular'] ml-1">
                                                                        {e.relation} | {moment().diff(e.dob, 'years')} yrs | {e.phone}
                                                                    </Text>
                                                                </View>
                                                                <TouchableOpacity style={{ position: 'absolute', top: 10, right: 8 }}
                                                                    onPress={() => setDependents(dependents.filter((obj) => obj.id !== e.id))}
                                                                >
                                                                    <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                                </TouchableOpacity>
                                                            </View>)}

                                                        {dependents.length >= 5 ? '' :
                                                            <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                                onPress={() => navigation.navigate('AutoCompleteList', {
                                                                    type: 1,
                                                                    setData: (record) => {
                                                                        const e_data = [...dependents];
                                                                        e_data.push({
                                                                            id: dependents.length + 1,
                                                                            ...record
                                                                        })
                                                                        setDependents(e_data);
                                                                    },
                                                                })}
                                                            >
                                                                <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add</Text>
                                                                <Icon name="plus" size={16} color={"#1da861"} />
                                                            </TouchableOpacity>}
                                                    </View>
                                                </View>),
                                                third: () => (<View >
                                                    <TextFieldGroup
                                                        title={'Address Details'}
                                                        data={[
                                                            {
                                                                title: "Current Address",
                                                                name: "presentAddress",
                                                                control: control,
                                                                rules: {
                                                                    required: true
                                                                },
                                                                type: "textarea",
                                                                lines: 2,
                                                                label: false,

                                                            },
                                                            {
                                                                title: "Permanent Address",
                                                                name: "permanentAddress",
                                                                control: control,
                                                                rules: {
                                                                    required: false
                                                                },
                                                                type: "textarea",
                                                                lines: 2,
                                                                label: false,
                                                                readOnly: ship
                                                            }]}
                                                    />

                                                    <TouchableOpacity className='flex flex-row' onPress={() => setShip(!ship)}>
                                                        <Checkbox
                                                            status={ship ? 'checked' : 'unchecked'}
                                                            uncheckedColor='#488dff'
                                                            color='#488dff'
                                                            onPress={() => setShip(!ship)}
                                                        />
                                                        <Text className="[font-family:'Poppins-Regular'] p-2 pl-0">Permanent Address similar as Current </Text>
                                                    </TouchableOpacity>
                                                </View>)
                                            })}
                                            onIndexChange={setIndex}
                                            initialLayout={{ width: '100%' }}
                                        /> 
                                    </View>

                                    {/* <ScrollView className='w-full h-full bg-[#f3f2f7]' nestedScrollEnabled={true} directionalLockEnabled={true}>

                                    </ScrollView> */}

                                </> :
                                page === 1 ?
                                    <>
                                        <View className='mt-5 mb-2'>

                                            <TabView
                                                navigationState={{ index: index1, routes: routes1 }}
                                                renderTabBar={_renderTabBar1}
                                                renderScene={SceneMap({
                                                    one: () => (<View>
                                                        <View>
                                                            <TextFieldGroup title={'Education'} />

                                                            {education.map(e =>
                                                                    <View style={styles.row} className='flex flex-row rounded-[10px] mb-2'>
                                                                        <View style={{ width: '90%' }}>
                                                                            <View style={styles.nameContainer} className='ml-1'>
                                                                                <Text style={{
                                                                                    color: '#222',
                                                                                    fontSize: 15
                                                                                }} className="[font-family:'Poppins-Medium'] ">{e.college}</Text>
                                                                            </View>
                                                                            <Text style={styles.time} className="ml-1 [font-family:'Poppins-Regular'] " >
                                                                                {e.university}
                                                                            </Text>
                                                                            <Text style={{ fontSize: 14 }} className="ml-1 [font-family:'Poppins-Regular'] " >{e.education} | {e.course}</Text>
                                                                            <Text style={{ fontSize: 14 }} className="ml-1 [font-family:'Poppins-Regular'] " >Passing Year : {e.passing_year}</Text>
                                                                            <Text style={{ fontSize: 14 }}className="ml-1 [font-family:'Poppins-Regular'] " >Percentage : {e.percentage}</Text>
                                                                            <Text style={{ position: 'absolute', bottom: 0, right: -30 }} className=" [font-family:'Poppins-Regular'] " >{moment(e.start_date).format('DD MMM YY')} - {moment(e.end_date).format('DD MMM YY')}</Text>

                                                                        </View>
                                                                        <View style={{ width: '10%' }}>
                                                                            <TouchableOpacity
                                                                                onPress={() => setDependents(dependents.filter((obj) => obj.id !== e.id))}
                                                                                style={{ position: 'absolute', top: -65, right: 0 }}
                                                                            >
                                                                                <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                                            </TouchableOpacity>
                                                                        </View>
                                                                    </View>)}

                                                            {education.length >= 5 ? '' :
                                                                <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor:"#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                                    onPress={() => navigation.navigate('AutoCompleteList', {
                                                                        type: 2,
                                                                        setData: (record) => {
                                                                            const e_data = [...education];
                                                                            e_data.push({
                                                                                id: education.length + 1,
                                                                                ...record
                                                                            })
                                                                            setEducation(e_data);
                                                                        },
                                                                    })}
                                                                >
                                                                    <Text style={{ color:"#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add</Text>
                                                                    <Icon name="plus" size={16} color={"#1da861"} />
                                                                </TouchableOpacity>}

                                                        </View>
                                                    </View>),
                                                    two: () => (<View>
                                                        <TextFieldGroup
                                                            title={'employement details'}
                                                            data={[
                                                                {
                                                                    title: "Gross Salary",
                                                                    name: "grossSalary",
                                                                    control: control,
                                                                    rules: {
                                                                        required: false
                                                                    },
                                                                    type: "number",
                                                                    label: true
                                                                },
                                                                {
                                                                    title: "CTC",
                                                                    name: "ctc",
                                                                    control: control,
                                                                    rules: {
                                                                        required: false
                                                                    },
                                                                    type: "number",
                                                                    label: true
                                                                },

                                                                {
                                                                    title: "Assessment ",
                                                                    name: "assessmentYear",
                                                                    control: control,
                                                                    rules: {
                                                                        required: false
                                                                    },
                                                                    type: "number",
                                                                    label: true
                                                                },
                                                                {
                                                                    title: "Joining Date",
                                                                    type: "date",
                                                                    label: true,
                                                                    value: joinDate,
                                                                    setValue: setJoinDate,
                                                                    rules: {
                                                                        required: false
                                                                    },
                                                                },
                                                                {
                                                                    title: "Resign Date",
                                                                    type: "date",
                                                                    label: true,
                                                                    value: resignDate,
                                                                    setValue: setResignDate,
                                                                    rules: {
                                                                        required: false
                                                                    },
                                                                },
                                                                {
                                                                    title: "Reason of Resign",
                                                                    name: "reasonOfResign",
                                                                    type: "textarea",
                                                                    control: control,
                                                                    rules: {
                                                                        required: false
                                                                    },
                                                                    lines: 2,
                                                                }
                                                            ]} />
                                                        

                                                        <View>

                                                            <TextFieldGroup title={'Pre Employment'} />

                                                            {prevEmployer.map(e =>
                                                                    <View style={styles.row} className='flex flex-row rounded-[10px] mb-2'>
                                                                        <View style={{ width: '90%' }}>
                                                                            <View style={styles.nameContainer} className='ml-1'>
                                                                                <Text className="[font-family:'Poppins-Medium']" style={styles.nameTxt}>{e.name}</Text>
                                                                            </View>
                                                                            <Text style={styles.time} className="ml-1 [font-family:'Poppins-Regular']">
                                                                                {e.title}
                                                                            </Text>
                                                                            <Text style={{ fontSize: 14 }} className="m-1 [font-family:'Poppins-Regular']">Gross Salary : {e.gross_salary}</Text>
                                                                            <Text style={{ fontSize: 14 }} className="m-1 [font-family:'Poppins-Regular']">CTC : {e.ctc}</Text>
                                                                            <Text className="[font-family:'Poppins-Regular']" style={{ position: 'absolute', bottom: 5, right: -30 }}>{moment(e.start_date).format('DD MMM YY')} - {moment(e.end_date).format('DD MMM YY')}</Text>

                                                                        </View>
                                                                        <View style={{ width: '10%' }}>
                                                                            <TouchableOpacity
                                                                                onPress={() => setPrevEmployer(prevEmployer.filter((obj) => obj.id !== e.id))}
                                                                                style={{ position: 'absolute', top: -50, right: 0 }}
                                                                            >
                                                                                <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                                            </TouchableOpacity>
                                                                        </View>
                                                                    </View>)}

                                                            {prevEmployer.length >= 5 ? '' :
                                                                <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                                    onPress={() => navigation.navigate('AutoCompleteList', {
                                                                        type: 3,
                                                                        setData: (record) => {
                                                                            const e_data = [...prevEmployer];
                                                                            e_data.push({
                                                                                id: prevEmployer.length + 1,
                                                                                ...record
                                                                            })
                                                                            setPrevEmployer(e_data);
                                                                        },
                                                                    })}
                                                                >
                                                                    <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add</Text>
                                                                    <Icon name="plus" size={16} color={"#1da861"} />
                                                                </TouchableOpacity>}

                                                                <TextFieldGroup title={'Uniform'} />

                                                                {uniform.map(e =>
                                                                    <View style={styles.row} className='flex flex-row rounded-[10px] mb-2'>
                                                                        <View style={{ width: '90%' }}>
                                                                            <View style={styles.nameContainer} className='ml-1'>
                                                                                <Text style={styles.nameTxt} className="[font-family:'Poppins-Regular']">{e.item}</Text>
                                                                            </View>
                                                                            <Text style={styles.time} className="[font-family:'Poppins-Regular'] ml-1">
                                                                                Qty : {e.quantity}
                                                                            </Text>
                                                                        </View>
                                                                        <TouchableOpacity style={{ position: 'absolute', top: 10, right: 8 }}
                                                                            onPress={() => setUniform(uniform.filter((obj) => obj.id !== e.id))}
                                                                        >
                                                                            <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                                        </TouchableOpacity>
                                                                    </View>)}

                                                                {uniform.length >= 8 ? '' :
                                                                    <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                                        onPress={() => navigation.navigate('AutoCompleteList', {
                                                                            type: 4,
                                                                            setData: (record) => {
                                                                                const e_data = [...uniform];
                                                                                e_data.push({
                                                                                    id: uniform.length + 1,
                                                                                    ...record
                                                                                })
                                                                                setUniform(e_data);
                                                                            },
                                                                        })}
                                                                    >
                                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add</Text>
                                                                        <Icon name="plus" size={16} color={"#1da861"} />
                                                                    </TouchableOpacity>}
                                                        </View>
                                                    </View>)
                                                })}
                                                onIndexChange={setIndex1}
                                                initialLayout={{ width: '100%' }}
                                            />
                                        </View>

                                        {uniform.map(e =>
                                                                    <View style={styles.row} className='flex flex-row rounded-[10px] mb-2'>
                                                                        <View style={{ width: '90%' }}>
                                                                            <View style={styles.nameContainer} className='ml-1'>
                                                                                <Text style={styles.nameTxt} className="[font-family:'Poppins-Regular']">{e.item}</Text>
                                                                            </View>
                                                                            <Text style={styles.time} className="[font-family:'Poppins-Regular'] ml-1">
                                                                                Qty : {e.quantity}
                                                                            </Text>
                                                                        </View>
                                                                        <TouchableOpacity style={{ position: 'absolute', top: 10, right: 8 }}
                                                                            onPress={() => setUniform(uniform.filter((obj) => obj.id !== e.id))}
                                                                        >
                                                                            <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                                        </TouchableOpacity>
                                                                    </View>)}

                                                                {uniform.length >= 8 ? '' :
                                                                    <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                                        onPress={() => navigation.navigate('AutoCompleteList', {
                                                                            type: 4,
                                                                            setData: (record) => {
                                                                                const e_data = [...uniform];
                                                                                e_data.push({
                                                                                    id: uniform.length + 1,
                                                                                    ...record
                                                                                })
                                                                                setUniform(e_data);
                                                                            },
                                                                        })}
                                                                    >
                                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add</Text>
                                                                        <Icon name="plus" size={16} color={"#1da861"} />
                                                                    </TouchableOpacity>}

                                    </> : <>

                                        <TextFieldGroup
                                            title={'Compliance Details'}
                                            data={[
                                                {
                                                    title: "Is Compliance",
                                                    type: "checkbox",
                                                    label: false,
                                                    value: isCompliance,
                                                    setValue: setIsCompliance
                                                }]} />


                                        <TextFieldGroup
                                            title={'Nominee Details'}
                                            visible={isCompliance}
                                            data={[
                                                {
                                                    title: "Name",
                                                    name: "nomineeName",
                                                    control: control,
                                                    rules: {
                                                        required: isCompliance
                                                    },
                                                    type: "text",
                                                    label: true
                                                },
                                                {
                                                    title: "Relation",
                                                    name: "nomineeRelation",
                                                    control: control,
                                                    rules: {
                                                        required: isCompliance
                                                    },
                                                    type: "select",
                                                    label: true,
                                                    data: relations,
                                                    value: compRelation,
                                                    setValue: setCompRelation,
                                                    error: error.includes('compRelation')
                                                }]} />




                                        <View>
                                            <TextFieldGroup title={'Bank Details'}
                                                data={[
                                                    {
                                                        title: "Linked Phone",
                                                        name: "bankLinkPhone",
                                                        control: control,
                                                        rules: {
                                                            required: false
                                                        },
                                                        type: "phone",
                                                        label: true
                                                    }]} />

                                            {/* <Pressable onPress={() => pickImage('bank')} className='flex flex-row p-2 mt-3' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: "#488dff", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!bankPhoto ? <>
                                                    <Image className='mb-3'
                                                        source={{ uri: String(bankPhoto) }}
                                                        resizeMode={'contain'}
                                                        style={{ width: '100%', height: 200 }}
                                                    />
                                                    <Text style={{ color: "#488dff", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Bank Photo</Text>
                                                </> : <>
                                                    <Text style={{ color: "#488dff" }} className="[font-family:'Poppins-Regular'] text-md">Add Bank Photo</Text>
                                                    <Icon name="plus" size={20} color="#488dff" />
                                                </>}
                                            </Pressable> */}
                                        </View>

                                        <View>
                                            <TextFieldGroup title={'Terms & Conditions'} />
                                            {termsAndConditionPhoto && <TouchableOpacity
                                                onPress={() => setTermsAndConditionPhoto(null)}
                                                style={{ position: 'absolute', top: 10, right: 0 }}
                                            >
                                                <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                            </TouchableOpacity>}

                                            {termsAndConditionPhoto ?
                                                <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'solid', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                    onPress={() => pickFile('t&c')}
                                                >
                                                    <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">{termsAndConditionPhoto.name}</Text>
                                                    {/* <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} /> */}
                                                </TouchableOpacity>
                                                :
                                                <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                    onPress={() => pickFile('t&c')}
                                                >
                                                    <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add Terms & Conditions</Text>
                                                    <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                                </TouchableOpacity>}
                                        </View>

                                        <View>
                                            <TextFieldGroup title={'BGV Consent Form'} />
                                            {bgvConsentPhoto && <TouchableOpacity
                                                onPress={() => setBgvConsentPhoto(null)}
                                                style={{ position: 'absolute', top: 10, right: 0 }}
                                            >
                                                <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                            </TouchableOpacity>}

                                            {bgvConsentPhoto ?
                                                <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'solid', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                    onPress={() => pickFile('bgv')}
                                                >
                                                    <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">{bgvConsentPhoto.name}</Text>
                                                    {/* <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} /> */}
                                                </TouchableOpacity>
                                                :
                                                <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                    onPress={() => pickFile('bgv')}
                                                >
                                                    <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add BGV Consent Form</Text>
                                                    <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                                </TouchableOpacity>}
                                        </View>

                                        <View>
                                                        {/* <Modal
                                                            testID={'modal'}
                                                            isVisible={signModel}
                                                            // onSwipeComplete={this.close}
                                                            swipeDirection={['up', 'left', 'right', 'down']}
                                                            style={{ justifyContent: 'flex-end', margin: 0 }}>
                                                            <ModalView onPress={() => setSignModel(false)} />
                                                        </Modal> */}

                                                        <Modal visible={signModel}>
                                                            <SignatureScreen setMySignature={setSignatureImage} Close={()=> setSignModel(!signModel)}/>
                                                            <TouchableOpacity onPress={()=> setSignModel(!signModel)} className='p-3 bottom-[20%] bg-blue-500'><Text className='color-[#fff] text-center'>Close</Text></TouchableOpacity>
                                                        </Modal>

                                                        <TextFieldGroup title={'Signature'} />

                                                        {signatureImage && <TouchableOpacity
                                                            onPress={() => setSignatureImage(null)}
                                                            style={{ position: 'absolute', top: 15, right: 0 }}
                                                        >
                                                            <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                        </TouchableOpacity>}

                                                        {signatureImage ? 
                                                        <TouchableOpacity onPress={()=> setSignModel(!signModel)} className='flex flex-row p-2 mt-1' style={{ borderStyle: 'solid', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                             <Image 
                                                                    source={{ uri: String(signatureImage) }}
                                                                    resizeMode={'contain'}
                                                                    style={{ width: '100%', height: 200 }}
                                                                />
                                                        </TouchableOpacity> 
                                                        :
                                                            <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                                onPress={() => setSignModel(true)}
                                                            >
                                                                <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add Signature</Text>
                                                                <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                                            </TouchableOpacity>}
                                        </View>

                                        <View>

                                            <TextFieldGroup title={'Thumb'} />

                                            {thumbPhoto && <TouchableOpacity
                                                onPress={() => setThumbPhoto(null)}
                                                style={{ position: 'absolute', top: 10, right: 0 }}
                                            >
                                                <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                            </TouchableOpacity>}

                                            {thumbPhoto ?
                                                <TouchableOpacity className='flex flex-row p-2' style={{ borderStyle: 'solid', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                    onPress={() => pickFile('thumb')}
                                                >
                                                    <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">{thumbPhoto.name}</Text>
                                                    {/* <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} /> */}
                                                </TouchableOpacity>
                                                :
                                                <TouchableOpacity className='flex flex-row p-2' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                    onPress={() => pickFile('thumb')}
                                                >
                                                    <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add Thumb File</Text>
                                                    <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                                </TouchableOpacity>}
                                        </View>
{/*

                                            <TextFieldGroup title={'Other KYC Details'} />


                                            <Pressable onPress={() => pickImageFile('aadhar')} className='flex flex-row p-2 mt-1' style={{ borderStyle: aadharCard ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!aadharCard ? <>
                                                    <Image className='mb-3'
                                                        source={{ uri: aadharCard?.data?.uri ? aadharCard?.data?.uri : aadharCard?.url  }}
                                                        resizeMode={'contain'}
                                                        style={{ width: '100%', height: 200 }}
                                                    />
                                                    <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Aadhar Card</Text>
                                                </> : <>
                                                    <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Aadhar Card</Text>
                                                    <Icon name="plus" size={20} color="#1da861" />
                                                </>}
                                            </Pressable>

                                            <Pressable onPress={() => pickImageFile('pan')} className='flex flex-row p-2 mt-3' style={{ borderStyle: panCard ? 'solid' :  'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!panCard ? <>
                                                    <Image className='mb-3'
                                                        source={{ uri: panCard?.data?.uri ? panCard?.data?.uri : panCard?.url  }}
                                                        resizeMode={'contain'}
                                                        style={{ width: '100%', height: 200 }}
                                                    />
                                                    <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Pan Card</Text>
                                                </> : <>
                                                    <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Pan Card</Text>
                                                    <Icon name="plus" size={20} color="#1da861" />
                                                </>}
                                            </Pressable>

                                            <Pressable onPress={() => pickImageFile('passbook')} className='flex flex-row p-2 mt-3' style={{ borderStyle: passbook ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!passbook ? <>
                                                    <Image className='mb-3'
                                                        source={{ uri: passbook?.data?.uri ? passbook?.data?.uri : passbook?.url  }}
                                                        resizeMode={'contain'}
                                                        style={{ width: '100%', height: 200 }}
                                                    />
                                                    <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Passbook</Text>
                                                </> : <>
                                                    <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Passbook</Text>
                                                    <Icon name="plus" size={20} color="#1da861" />
                                                </>}
                                            </Pressable>

                                            <Pressable onPress={() => pickImageFile('pvc')} className='flex flex-row p-2 mt-3' style={{ borderStyle:pvc ? 'solid' :  'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!pvc ? <>
                                                    <Image className='mb-3'
                                                        source={{ uri: pvc?.data?.uri ? pvc?.data?.uri : pvc?.url  }}
                                                        resizeMode={'contain'}
                                                        style={{ width: '100%', height: 200 }}
                                                    />
                                                    <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">PVC</Text>
                                                </> : <>
                                                    <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add PVC</Text>
                                                    <Icon name="plus" size={20} color="#1da861" />
                                                </>}
                                            </Pressable>

                                            <Pressable onPress={() => pickImageFile('bvc')} className='flex flex-row p-2 mt-3' style={{ borderStyle: bvc ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!bvc ? <>
                                                    <Image className='mb-3'
                                                        source={{ uri: bvc?.data?.uri ? bvc?.data?.uri : bvc?.url  }}
                                                        resizeMode={'contain'}
                                                        style={{ width: '100%', height: 200 }}
                                                    />
                                                    <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">BVC</Text>
                                                </> : <>
                                                    <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add BVC</Text>
                                                    <Icon name="plus" size={20} color="#1da861" />
                                                </>}
                                            </Pressable>
                                        </View> */}


  <View>
                                    <TextFieldGroup title={'Terms & Conditions'} />
                                    <SelectDropdown
                                        data={getDocumentOptions('terms', setTermsAndConditionPhoto)}
                                        dropdownOverlayColor='rgba(0,0,0,0.1)'
                                        onSelect={(selectedItem) => selectedItem.action()}
                                        renderButton={() => (
                                            <Pressable className='flex flex-row p-2 mt-1' style={{ borderStyle: termsAndConditionPhoto ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!termsAndConditionPhoto ? (
                                                    <>
                                                        <Image
                                                            source={{ uri: termsAndConditionPhoto?.data?.uri ? termsAndConditionPhoto.data.uri : termsAndConditionPhoto.url }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Terms & Conditions</Text>
                                                    </>
                                                ) : (
                                                    <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Terms & Conditions</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>
                                                )}
                                            </Pressable>
                                        )}
                                        renderItem={(item, index) => (
                                            <View style={[styles.dropdown2ItemStyle, index === 3 ? { borderBottomWidth: 0 } : {}]}>
                                                <Text style={[styles.dropdown2ItemTxtStyle, { color: item.color }]}>{item.label}</Text>
                                                <Icon name={item.icon} size={16} color={item.color} />
                                            </View>
                                        )}
                                        dropdownStyle={styles.dropdown2MenuStyle}
                                    />
                                </View>

                          
                                <View>
                                    <TextFieldGroup title={'Thumb'} />
                                    <SelectDropdown
                                        data={getDocumentOptions('thumb', setThumbPhoto)}
                                        dropdownOverlayColor='rgba(0,0,0,0.1)'
                                        onSelect={(selectedItem) => selectedItem.action()}
                                        renderButton={() => (
                                            <Pressable className='flex flex-row p-2 mt-1' style={{ borderStyle: thumbPhoto ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!thumbPhoto ? (
                                                    <>
                                                        <Image
                                                            source={{ uri: thumbPhoto?.data?.uri ? thumbPhoto.data.uri : thumbPhoto.url }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Thumb</Text>
                                                    </>
                                                ) : (
                                                    <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Thumb</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>
                                                )}
                                            </Pressable>
                                        )}
                                        renderItem={(item, index) => (
                                            <View style={[styles.dropdown2ItemStyle, index === 3 ? { borderBottomWidth: 0 } : {}]}>
                                                <Text style={[styles.dropdown2ItemTxtStyle, { color: item.color }]}>{item.label}</Text>
                                                <Icon name={item.icon} size={16} color={item.color} />
                                            </View>
                                        )}
                                        dropdownStyle={styles.dropdown2MenuStyle}
                                    />
                                </View>

                                <View>
                                    <TextFieldGroup title={'Aadhar Card'} />
                                    <SelectDropdown
                                        data={getDocumentOptions('aadhar', setAadharCard)}
                                        dropdownOverlayColor='rgba(0,0,0,0.1)'
                                        onSelect={(selectedItem) => selectedItem.action()}
                                        renderButton={() => (
                                            <Pressable className='flex flex-row p-2 mt-1' style={{ borderStyle: aadharCard ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!aadharCard ? (
                                                    <>
                                                        <Image
                                                            source={{ uri: aadharCard?.data?.uri ? aadharCard.data.uri : aadharCard.url }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Aadhar Card</Text>
                                                    </>
                                                ) : (
                                                    <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Aadhar Card</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>
                                                )}
                                            </Pressable>
                                        )}
                                        renderItem={(item, index) => (
                                            <View style={[styles.dropdown2ItemStyle, index === 3 ? { borderBottomWidth: 0 } : {}]}>
                                                <Text style={[styles.dropdown2ItemTxtStyle, { color: item.color }]}>{item.label}</Text>
                                                <Icon name={item.icon} size={16} color={item.color} />
                                            </View>
                                        )}
                                        dropdownStyle={styles.dropdown2MenuStyle}
                                    />
                                </View>

                                <View>
                                    <TextFieldGroup title={'Pan Card'} />
                                    <SelectDropdown
                                        data={getDocumentOptions('pan', setPanCard)}
                                        dropdownOverlayColor='rgba(0,0,0,0.1)'
                                        onSelect={(selectedItem) => selectedItem.action()}
                                        renderButton={() => (
                                            <Pressable className='flex flex-row p-2 mt-1' style={{ borderStyle: panCard ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!panCard ? (
                                                    <>
                                                        <Image
                                                            source={{ uri: panCard?.data?.uri ? panCard.data.uri : panCard.url }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Pan Card</Text>
                                                    </>
                                                ) : (
                                                    <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Pan Card</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>
                                                )}
                                            </Pressable>
                                        )}
                                        renderI tem={(item, index) => (
                                            <View style={[styles.dropdown2ItemStyle, index === 3 ? { borderBottomWidth: 0 } : {}]}>
                                                <Text style={[styles.dropdown2ItemTxtStyle, { color: item.color }]}>{item.label}</Text>
                                                <Icon name={item.icon} size={16} color={item.color} />
                                            </View>
                                        )}
                                        dropdownStyle={styles.dropdown2MenuStyle}
                                    />
                                </View>

                                <View>
                                    <TextFieldGroup title={'Passbook'} />
                                    <SelectDropdown
                                        data={getDocumentOptions('passbook', setPassbook)}
                                        dropdownOverlayColor='rgba(0,0,0,0.1)'
                                        onSelect={(selectedItem) => selectedItem.action()}
                                        renderButton={() => (
                                            <Pressable className='flex flex-row p-2 mt-1' style={{ borderStyle: passbook ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!passbook ? (
                                                    <>
                                                        <Image
                                                            source={{ uri: passbook?.data?.uri ? passbook.data.uri : passbook.url }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Passbook</Text>
                                                    </>
                                                ) : (
                                                    <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Passbook</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>
                                                )}
                                            </Pressable>
                                        )}
                                        renderItem={(item, index) => (
                                            <View style={[styles.dropdown2ItemStyle, index === 3 ? { borderBottomWidth: 0 } : {}]}>
                                                <Text style={[styles.dropdown2ItemTxtStyle, { color: item.color }]}>{item.label}</Text>
                                                <Icon name={item.icon} size={16} color={item.color} />
                                            </View>
                                        )}
                                        dropdownStyle={styles.dropdown2MenuStyle}
                                    />
                                </View>

                                <View>
                                    <TextFieldGroup title={'PVC'} />
                                    <SelectDropdown
                                        data={getDocumentOptions('pvc', setpvc)}
                                        dropdownOverlayColor='rgba(0,0,0,0.1)'
                                        onSelect={(selectedItem) => selectedItem.action()}
                                        renderButton={() => (
                                            <Pressable className='flex flex-row p-2 mt-1' style={{ borderStyle: pvc ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!pvc ? (
                                                    <>
                                                        <Image
                                                            source={{ uri: pvc?.data?.uri ? pvc.data.uri : pvc.url }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">PVC</Text>
                                                    </>
                                                ) : (
                                                    <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add PVC</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>
                                                )}
                                            </Pressable>
                                        )}
                                        renderItem={(item, index) => (
                                            <View style={[styles.dropdown2ItemStyle, index === 3 ? { borderBottomWidth: 0 } : {}]}>
                                                <Text style={[styles.dropdown2ItemTxtStyle, { color: item.color }]}>{item.label}</Text>
                                                <Icon name={item.icon} size={16} color={item.color} />
                                            </View>
                                        )}
                                        dropdownStyle={styles.dropdown2MenuStyle}
                                    />
                                </View>

                                <View>
                                    <TextFieldGroup title={'BVC'} />
                                    <SelectDropdown
                                        data={getDocumentOptions('bvc', setbvc)}
                                        dropdownOverlayColor='rgba(0,0,0,0.1)'
                                        onSelect={(selectedItem) => selectedItem.action()}
                                        renderButton={() => (
                                            <Pressable className='flex flex-row p-2 mt-1' style={{ borderStyle: bvc ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                {!!bvc ? (
                                                    <>
                                                        <Image
                                                            source={{ uri: bvc?.data?.uri ? bvc.data.uri : bvc.url }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">BVC</Text>
                                                    </>
                                                ) : (
                                                    <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add BVC</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>
                                                )}
                                            </Pressable>
                                        )}
                                        renderItem={(item, index) => (
                                            <View style={[styles.dropdown2ItemStyle, index === 3 ? { borderBottomWidth: 0 } : {}]}>
                                                <Text style={[styles.dropdown2ItemTxtStyle, { color: item.color }]}>{item.label}</Text>
                                                <Icon name={item.icon} size={16} color={item.color} />
                                            </View>
                                        )}
                                        dropdownStyle={styles.dropdown2MenuStyle}
                                    />
                                </View>


                                    </>}


                        </View>

                    </View>


                </View>}
            </View>
        </ScrollView>
        <View className={`p-6 flex flex-row pt-4 justify-center bg-white ${Platform.OS === 'ios' ? 'pb-10' : 'pb-5'}`}>
            {/* <View className='w-[20%] pr-2 '>
                <TouchableOpacity
                    style={styles.shadow} className=" w-full bg-teal-400 p-3 rounded-[16px] "
                    onPress={AddEmployee}
                >
                    <Text className="text-lg text-white [font-family:'Poppins-SemiBold'] text-center">
                        a</Text>
                </TouchableOpacity>
            </View> */}

            {page > 0 && <View className='w-[20%] pr-2'>
                <TouchableOpacity
                    style={styles.shadow} className=" w-full bg-[#caf6df] p-3 rounded-[16px] "
                    onPress={() => page > 0 && setPage(page - 1)} disabled={page === 0 ? true : false}
                >
                    <Feather name='chevron-left' size={28} color={'#1da861'}/>
                    {/* <Text className="text-lg text-white [font-family:'Poppins-SemiBold'] text-center">
                        Previous</Text> */}
                </TouchableOpacity>
            </View>}

            <View className={`${page > 0 ? 'w-[80%]': 'w-[100%]'}`}>
                <TouchableOpacity
                    style={[styles.shadow,{backgroundColor:page === 2 ? '#1da861': '#caf6df'}]} className="w-full p-3 rounded-[16px]" 
                    onPress={handleSubmit(AddEmployee)}
                >
                    {page === 2 ? 
                        <Text className="text-lg text-white [font-family:'Poppins-Medium'] tracking-wide text-center" style={{color:'#fcfcfc'}}>
                            {route.params.id ? "Update" : "Submit"}
                        </Text>
                        : <Text className="text-lg text-white [font-family:'Poppins-Medium'] tracking-wide text-center" style={{color:'#1da861'}}>
                            Continue
                        </Text>}
                </TouchableOpacity>
            </View>
        </View>

    </>
);
};

const styles = StyleSheet.create({
shadow: {
// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
// box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
// boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
shadowOffset: { height: 8, width: 0 },
shadowColor: 'rgba(149, 157, 165, 0.2)',
shadowOpacity: 0.3,
elevation: 3,
zIndex: 999,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
shadowOffset: { height: 8, width: 0 },
shadowColor: 'rgba(149, 157, 165, 0.2)',
shadowOpacity: 0.3,
elevation: 3,
zIndex: 999,
},
searchBar: {
borderWidth: 1,
height: 40
},
container2: {
flex: 1,
alignItems: "center",
justifyContent: "center",
textAlign: 'center',
paddingTop: 15
// verticalAlign: 'middle'
},
image: {
width: 90,
height: 90,
shadowOffset: { height: 8, width: 0 },
shadowColor: 'rgba(149, 157, 165, 0.2)',
shadowOpacity: 0.3,
elevation: 3,
},
row: {
alignItems: 'center',
// borderColor: '#dcdcdc',
backgroundColor: '#fff',
// borderBottomWidth: 1,
padding: 10,
justifyContent: 'space-between',
},
pic: {
borderRadius: 25,
width: 50,
height: 50,
borderColor: 'grey',
borderWidth: 0.1
},
profilePic: {
borderRadius: 40,
width: 80,
height: 80,
borderColor: 'grey',
borderWidth: 0.1
},
nameContainer: {
justifyContent: 'space-between',
},
nameTxt: {
// marginLeft: 5,
fontWeight: '600',
color: '#222',
fontSize: 16,
},
mblTxt: {
fontWeight: '200',
color: '#777',
fontSize: 13,
},
end: {
alignItems: 'center',
},
time: {
fontWeight: '400',
color: '#666',
fontSize: 14,
},
icon: {
height: 28,
width: 28,
},
dropdown2MenuStyle: {
backgroundColor: '#f5f5f5',
borderRadius: 12,
width: 'auto',
left: '20%',
// right:20,
marginTop: -70
},
dropdown2ItemStyle: {
width: '100%',
flexDirection: 'row',
paddingHorizontal: 15,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 9.5,
borderBottomWidth: 0.5,
borderBottomColor: '#d7d7d7',
// borderTopWidth: 0.5,
// borderTopColor: '#d7d7d7',
},
dropdown2ItemTxtStyle: {
flex: 1,
fontSize: 14,
fontWeight: 'ultralight !important'
},
tabBar: {
flexDirection: 'row',
width: '100%',
paddingRight: '25%'
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 16,
},
signatureContainer: {
marginTop: 80,
},
signaturePreview: {
marginTop: 150,
marginBottom: 92,
alignItems: 'center',
top: 80
},
});

// text-[#34c2c1]
iss code mai aadhar pan card pvc bvc passbiook isma files pdf selct nhi hora anset horaa image na pdf pdf kaisa set hota wo tem abnd condition sa sikhoo