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 ">



                                            {/* <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