<script setup>
    import { useModalLoginOpen } from '@layouts/stores/config'
    import Dinheiro from '@global/components/Dinheiro.vue'
    import moment from 'moment'

    const { setAlert } = useAlert()
    const modalLoginOpen = useModalLoginOpen()

    const loading = ref(true)
    const router = useRouter()
    const route = useRoute()

    const { width: windowWidth } = useWindowSize();
    const isMobile = ref(false)
    isMobile.value = windowWidth.value < 768

    const userData = useCookie("userData").value;
    const salvo = ref(false)
    const novo = ref(false)
    const edit = ref(false)

    const formaEnvio = ref(null)

    const curriculo = ref({
        hasAnexo: false,
        curriculoAnexo: null,
        foto: null,
        nomeCompleto: null,
        email: null,
        telefone: null,
        whatsapp: null,
        dataNascimento: null,
        cpf: null,
        endereco: {
            cep: null,
            street: null,
            city: null,
            state: null,
            neighborhood: null,
            complement: null,
            number: null,
        },
        redesSociais: [],
        pcd: {
            tipos: [],
            descricao: null,
        },
        areasInteresse: [],
        pretensaoSalarial: null,
        resumoProfissional: null,
        escolaridade: {
            instituicao: null,
            curso: null,
            nivel: null,
            inicio: null,
            fim: null,
            status: null,
            duracao: null,
            paisOndeCursou: null,
            cidadeOndeCursou: null,
            ufOndeCursou: null,
        },
        cursos: [],
        idiomas: [],
        experienciaProfissional: [],
        habilidades: []
    })

    const getCurriculo = async () => {
        loading.value = true

        try {
            const res = await $api(`/vagas/searchCurriculo/${userData.id}`, { method: "GET" });

            if (!res) return;

            console.log('Res Curriculo', res)

            if (res && res !== 'none') {

                novo.value = false

                if (res.hasAnexo) {
                    formaEnvio.value = 'anexo'

                    curriculo.value.hasAnexo = true
                    curriculo.value.curriculoAnexo = res.curriculoAnexo
                } else {
                    formaEnvio.value = 'formulario'
                }

                curriculo.value.id = res.id
                curriculo.value.foto = res.foto ? res.foto : userData.avatar ? userData.avatar : null
                curriculo.value.nomeCompleto = res.nomeCompleto ? res.nomeCompleto : userData.fullName ? userData.fullName : null
                curriculo.value.email = res.email ? res.email : userData.email ? userData.email : null
                curriculo.value.telefone = res.telefone ? res.telefone : userData.phone ? userData.phone : null
                curriculo.value.whatsapp = res.whatsapp ? res.whatsapp : userData.phone ? userData.phone : null
                curriculo.value.dataNascimento = res.dataNascimento
                curriculo.value.cpf = res.cpf ? res.cpf : userData.cpf ? userData.cpf : null
                curriculo.value.endereco = res.endereco ? res.endereco : userData.endereco ? userData.endereco : {
                    cep: null,
                    street: null,
                    city: null,
                    state: null,
                    neighborhood: null,
                    complement: null,
                    number: null,
                }
                curriculo.value.redesSociais = res.redesSociais ? res.redesSociais : []
                curriculo.value.pcd = res.pcd ? res.pcd : {
                    tipos: [],
                    descricao: null,
                }
                curriculo.value.areasInteresse = res.areasInteresse ? res.areasInteresse : []
                curriculo.value.pretensaoSalarial = res.pretensaoSalarial
                curriculo.value.resumoProfissional = res.resumoProfissional
                curriculo.value.escolaridade = res.escolaridade ? res.escolaridade : {}
                curriculo.value.cursos = res.cursos ? res.cursos : []
                curriculo.value.idiomas = res.idiomas ? res.idiomas : []
                curriculo.value.experienciaProfissional = res.experienciaProfissional ? res.experienciaProfissional : []
                curriculo.value.habilidades = res.habilidades ? res.habilidades : []

            } else if (userData && userData.id) {
                novo.value = true

                curriculo.value.foto = userData.avatar ? userData.avatar : null
                curriculo.value.nomeCompleto = userData.fullName ? userData.fullName : null
                curriculo.value.email = userData.email ? userData.email : null
                curriculo.value.telefone = userData.phone ? userData.phone : null
                curriculo.value.whatsapp = userData.phone ? userData.phone : null
                curriculo.value.endereco = userData.endereco ? userData.endereco : {
                    cep: null,
                    street: null,
                    city: null,
                    state: null,
                    neighborhood: null,
                    complement: null,
                    number: null,
                }
                curriculo.value.cpf = userData.cpf ? userData.cpf : null

            } else {
                novo.value = true
            }

        } catch (error) {
            console.error('Erro ao buscar curriculo: ', error, error.response);
        }

        loading.value = false
    }

    const rolarAtéOTopo = () => {
        const elemento = document.getElementById('elemento-topo')

        if (elemento) {
            const posicao = elemento.getBoundingClientRect().top + window.scrollY - 100
            window.scrollTo({ top: posicao, behavior: 'smooth' })
        }
    }


    getCurriculo()

    const step = ref(1)
    const andamento = ref(10)

    const validarCurriculo = (step) => {

        if (step == 1) {
            if (!curriculo.value.nomeCompleto) {
                setAlert('Preencha o seu nome completo', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

            if (!curriculo.value.email) {
                setAlert('Preencha o seu e-mail', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

            if (!curriculo.value.telefone) {
                setAlert('Preencha o seu telefone', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

        } else if (step == 2) {
            if (!curriculo.value.endereco.cep) {
                setAlert('Preencha o seu CEP', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

            if (!curriculo.value.endereco.street) {
                setAlert('Preencha a sua rua', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

            if (!curriculo.value.endereco.number) {
                setAlert('Preencha o número', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

            if (!curriculo.value.endereco.neighborhood) {
                setAlert('Preencha o bairro', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

            if (!curriculo.value.endereco.city) {
                setAlert('Preencha a cidade', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

            if (!curriculo.value.endereco.state) {
                setAlert('Preencha o estado', 'error', 'tabler-alert-triangle', 4000)
                return false
            }
        }

        if (step.value == 4 && formaEnvio.value == 'anexo' && !curriculo.value.curriculoAnexo) {
            setAlert('Envie seu currículo em PDF', 'error', 'tabler-alert-triangle', 4000)
            return false
        }

        return true
    }

    const nextStep = () => {
        console.log('Next Step', step.value)

        if (!validarCurriculo(step.value)) return

        if (step.value == 5 && formaEnvio.value == 'anexo' || step.value == 10 && formaEnvio.value == 'formulario' || edit.value) {
            console.log('Salvar Curriculo')
            salvarCurriculo()
            return
        }

        step.value++
        andamento.value = step.value * (formaEnvio.value == 'formulario' ? 10 : 20)
        rolarAtéOTopo()
    }

    const prevStep = () => {
        if (edit.value) {
            edit.value = false
            rolarAtéOTopo()
            return
        }

        if (curriculo.value.id && novo.value && step.value == 1) {
            novo.value = false
            rolarAtéOTopo()
            return
        }

        step.value--
        andamento.value = step.value * (formaEnvio.value == 'formulario' ? 10 : 20)
        rolarAtéOTopo()
    }

    const estados = [
        { value: 'AC', text: 'Acre' },
        { value: 'AL', text: 'Alagoas' },
        { value: 'AP', text: 'Amapá' },
        { value: 'AM', text: 'Amazonas' },
        { value: 'BA', text: 'Bahia' },
        { value: 'CE', text: 'Ceará' },
        { value: 'DF', text: 'Distrito Federal' },
        { value: 'ES', text: 'Espírito Santo' },
        { value: 'GO', text: 'Goiás' },
        { value: 'MA', text: 'Maranhão' },
        { value: 'MT', text: 'Mato Grosso' },
        { value: 'MS', text: 'Mato Grosso do Sul' },
        { value: 'MG', text: 'Minas Gerais' },
        { value: 'PA', text: 'Pará' },
        { value: 'PB', text: 'Paraíba' },
        { value: 'PR', text: 'Paraná' },
        { value: 'PE', text: 'Pernambuco' },
        { value: 'PI', text: 'Piauí' },
        { value: 'RJ', text: 'Rio de Janeiro' },
        { value: 'RN', text: 'Rio Grande do Norte' },
        { value: 'RS', text: 'Rio Grande do Sul' },
        { value: 'RO', text: 'Rondônia' },
        { value: 'RR', text: 'Roraima' },
        { value: 'SC', text: 'Santa Catarina' },
        { value: 'SP', text: 'São Paulo' },
        { value: 'SE', text: 'Sergipe' },
        { value: 'TO', text: 'Tocantins' },
    ]

    const cidades = ref([])

    const cidadesList = async (estado) => {
        if (!estado) {
            estado = 'RJ'
        }

        try {
            const res = await $api(`/users/cidades/${estado}`, { method: "GET" });

            if (!res) return;

            //console.log(res)
            cidades.value = res

        } catch (error) {
            console.error('Erro ao buscar cidades: ', error);
            console.error('Erro ao buscar cidades: ', error.response);
        }
    }

    const getCep = async () => {
        if (curriculo.value?.endereco?.cep && curriculo.value?.endereco?.cep?.length == 9) {
            try {
                const res = await $api(`/users/cep/${curriculo.value?.endereco?.cep}`, { method: "GET" });

                if (!res) return;

                console.log(res)

                curriculo.value.endereco.street = res.logradouro
                curriculo.value.endereco.neighborhood = res.bairro
                curriculo.value.endereco.city = res.localidade
                curriculo.value.endereco.state = res.uf
                cidadesList(res.uf)

            } catch (error) {
                console.error('Erro ao buscar CEP: ', error, error.response);
                //setAlert('CEP não encontrado! Tente novamente.', 'error', 'tabler-alert-triangle', 4000)
            }
        }
    }

    const isPCD = ref(false)

    const itensPcd = [
        'Auditiva',
        'Fala',
        'Física',
        'Intelectual/Mental',
        'Visual'
    ]

    const addRedeSocial = () => {
        curriculo.value.redesSociais.push({
            nome: null,
            link: null,
        })
    }

    const removeRedeSocial = (index) => {
        curriculo.value.redesSociais.splice(index, 1)
    }

    const itensRedesSociais = [
        { value: 'Facebook', text: 'Facebook' },
        { value: 'Instagram', text: 'Instagram' },
        { value: 'LinkedIn', text: 'LinkedIn' },
        { value: 'Twitter', text: 'Twitter' },
        { value: 'GitHub', text: 'GitHub' },
    ]

    const nivelEscolaridadeItens = [
        'Não informar',
        'Ensino Fundamental (1° grau) incompleto',
        'Ensino Fundamental (1° grau) cursando',
        'Ensino Fundamental (1° grau) completo',
        'Ensino Médio (2° grau) incompleto',
        'Ensino Médio (2° grau) cursando',
        'Ensino Médio (2° grau) completo',
        'Ensino Médio Profissionalizante incompleto',
        'Ensino Médio Profissionalizante cursando',
        'Ensino Médio Profissionalizante completo',
        'Formação Técnica incompleta',
        'Formação Técnica cursando',
        'Formação Técnica completa',
        'Ensino Superior incompleto',
        'Ensino Superior cursando',
        'Ensino Superior completo',
        'Pós-graduação no nível Especialização',
        'Pós-graduação no nível Mestrado',
        'Pós-graduação no nível Doutorado',
        'Pós-graduação no nível Pós-Doutorado',
    ]

    watch(() => curriculo.value.escolaridade.nivel, (value) => {
        console.log('Nivel escolaridade', value)

        if (!value || value == 'Não informar') {
            curriculo.value.escolaridade.instituicao = null
            curriculo.value.escolaridade.curso = null
            curriculo.value.escolaridade.inicio = null
            curriculo.value.escolaridade.fim = null
            curriculo.value.escolaridade.status = null
            curriculo.value.escolaridade.duracao = null
            curriculo.value.escolaridade.paisOndeCursou = null
            curriculo.value.escolaridade.cidadeOndeCursou = null
            curriculo.value.escolaridade.ufOndeCursou = null
        } else {

            if (value.includes('incompleto')) {
                curriculo.value.escolaridade.status = 'Interrompido'
            } else if (value.includes('cursando')) {
                curriculo.value.escolaridade.status = 'Cursando'
            } else if (value.includes('completo')) {
                curriculo.value.escolaridade.status = 'Concluído'
            }

            if (value.includes('Ensino Fundamental')) {
                curriculo.value.escolaridade.curso = 'Ensino Fundamental'
            } else if (value.includes('2° grau')) {
                curriculo.value.escolaridade.curso = 'Ensino Médio'
            }
        }
    })

    const addCurso = () => {
        curriculo.value.cursos.push({
            nome: null,
            instituicao: null,
            inicio: null,
            fim: null,
            status: null,
            duracao: null,
            paisOndeCursou: null,
            cidadeOndeCursou: null,
            ufOndeCursou: null
        })
    }

    const removeCurso = (index) => {
        curriculo.value.cursos.splice(index, 1)
    }

    const addIdioma = () => {
        curriculo.value.idiomas.push({
            nome: null,
            nivel: null,
        })
    }

    const removeIdioma = (index) => {
        curriculo.value.idiomas.splice(index, 1)
    }

    const addExperiencia = () => {
        curriculo.value.experienciaProfissional.push({
            empresa: null,
            cargo: null,
            inicio: null,
            fim: null,
            descricao: null,
        })
    }

    const removeExperiencia = (index) => {
        curriculo.value.experienciaProfissional.splice(index, 1)
    }

    const habilidadeText = ref('')

    const addHabilidade = () => {
        let habilidade = habilidadeText.value
        if (!curriculo.value.habilidades.includes(habilidade)) {
            curriculo.value.habilidades.push(habilidade)
        }

        habilidadeText.value = ''
    }

    const removeHabilidade = (index) => {
        curriculo.value.habilidades.splice(index, 1)
    }

    const inputAvatar = ref(null)

    const changeAvatar = async (e) => {
        const file = e.target.files[0]

        console.log('File Avatar', file)

        if (!file) return

        if (file.size > 5000000) {
            setAlert('A imagem deve ter no máximo 5MB', 'error', 'tabler-alert-triangle', 4000)
            return
        }

        //Checar tipo de arquivo
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg']

        if (!allowedTypes.includes(file.type)) {
            setAlert('A imagem deve ser do tipo JPEG, JPG ou PNG', 'error', 'tabler-alert-triangle', 4000)
            return
        }

        if (file) {
            const formData = new FormData()
            formData.append('avatar', file)

            try {
                const res = await $api('/users/updateAvatar/' + userData.id, {
                    method: 'PUT',
                    body: formData,
                })

                if (!res) return

                console.log('Res Avatar', res)

                curriculo.value.foto = res

            } catch (error) {
                console.error('Erro ao enviar avatar: ', error, error.response)
            }
        }
    }

    const inputCurriculo = ref(null)

    const tratarNome = (nome) => {
        if (typeof nome !== 'string') return '';

        // Remover acentos com normalize
        nome = nome.normalize('NFD').replace(/[\u0300-\u036f]/g, '');

        // Retorna o nome "limpo", sem acentos
        return nome;
    };

    const changeCurriculoAnexo = async (e) => {
        const file = e.target.files[0]

        console.log('File Curriculo', file)

        if (!file) return

        if (file.size > 5000000) {
            setAlert('O arquivo deve ter no máximo 5MB', 'error', 'tabler-alert-triangle', 4000)
            return
        }

        //Checar tipo de arquivo
        const allowedTypes = ['application/pdf']

        if (!allowedTypes.includes(file.type)) {
            setAlert('O arquivo deve ser do tipo PDF', 'error', 'tabler-alert-triangle', 4000)
            return
        }

        const fileo = new File([file], `${tratarNome(file.name)}`, { type: file.type })

        console.log('File Curriculo Tratado', fileo)

        const formData = new FormData()
        formData.append('curriculo', fileo)
        formData.append('userId', userData.id)
        formData.append('isNew', novo.value)

        try {
            const res = await $api('/vagas/uploadCurriculoPDF/', {
                method: 'POST',
                body: formData,
            })

            if (!res) return

            console.log('Res Curriculo Anexo', res)

            curriculo.value.hasAnexo = true
            curriculo.value.curriculoAnexo = res

        } catch (error) {
            console.error('Erro ao enviar curriculo anexo: ', error, error.response)
            setAlert(error?.response?._data?.message || 'Erro ao enviar o anexo do currículo, tente novamente!', 'error', 'tabler-alert-triangle', 4000)
        }

        inputCurriculo.value.value = null
    }

    const nomeCurriculoAnexo = (nome) => {
        if (!nome) return 'Enviar currículo'

        if (nome.includes('/') && nome.includes('.pdf')) {
            return nome.split('/').pop().split('.pdf').shift() + '.pdf'
        }

        if (nome.includes('/') && !nome.includes('.pdf')) {
            return nome.split('/').pop() + '.pdf'
        }

        if (nome.includes('.pdf')) {
            return nome.split('.pdf').shift() + '.pdf'
        }

        return nome + '.pdf'
    }

    const loadingSave = ref(false)

    const salvarCurriculo = async () => {

        if (!validarCurriculo(1) || !validarCurriculo(4)) return

        loadingSave.value = true

        try {
            const res = await $api('/vagas/curriculo/save', {
                method: 'POST',
                body: {
                    userId: userData.id,
                    ...curriculo.value
                }
            })

            if (!res) return

            console.log('Res Salvar Curriculo', res)

            setAlert('Currículo salvo com sucesso!', 'success', 'tabler-check', 4000)

            salvo.value = true

            // Se tiver a query de vaga, redireciona para a vaga
            if (route.query.vaga) {
                router.push(`/vagas/${route.query.vaga}`);
            }

            getCurriculo()
        } catch (error) {
            console.error('Erro ao salvar curriculo: ', error, error.response)
            setAlert(error?.response?._data?.message || 'Erro ao salvar o currículo, tente novamente!', 'error', 'tabler-alert-triangle', 4000)
        }

        loadingSave.value = false
        edit.value = false
        novo.value = false
        step.value = 1
    }

    const handleEdit = (passo) => {
        console.log('Edit', passo)
        edit.value = true
        step.value = passo
        rolarAtéOTopo()
    }

    const handleEditAll = () => {
        edit.value = false
        novo.value = true
        step.value = 1
        rolarAtéOTopo()
    }

    const handleFormaEnvio = async (forma) => {
        if(!curriculo.value.id) {
            console.log('Forma Envio', forma)
            formaEnvio.value = forma
            return
        }
        try {
            const res = await $api('/vagas/changeModoCurriculo/' + userData.id, {
                method: 'PUT',
                body: {
                    modoCurriculo: forma
                }
            })

            if (!res) return

            console.log('Res Forma Envio', res)

            formaEnvio.value = forma
            if (!novo.value && !edit.value)
                handleEditAll()
            else
                rolarAtéOTopo()
        } catch (error) {
            console.error('Erro ao mudar forma de envio: ', error, error.response)
            setAlert(error?.response?._data?.message || 'Erro ao mudar a forma de envio do currículo, tente novamente!', 'error', 'tabler-alert-triangle', 4000)
        }
    }

    const handleBeforeUnload = (e) => {
        if (!save.value) {
            e.preventDefault();
            e.returnValue = 'Você tem certeza que deseja sair? Você perderá as informações preenchidas.';
        }
    }

    onMounted(() => {
        getCurriculo()

        if (windowWidth.value < 768) {
            isMobile.value = true
        }

        //Adicionar ouvinte de saída da página
        window.addEventListener('beforeunload', handleBeforeUnload);
    });

    onUnmounted(() => {
        //Remover ouvinte de saída da página
        window.removeEventListener('beforeunload', handleBeforeUnload);
    })
</script>

<template>
    <p class="mb-0" id="elemento-topo" style="opacity: 0; font-size: 2px;">Topo</p>

    <v-fade-transition>
        <div class="w-100 text-center" v-if="loading">
            <v-progress-circular color="primary" indeterminate :size="67" />
        </div>
    </v-fade-transition>

    <v-fade-transition>
        <VCard :class="!isMobile ? 'mx-auto w-50' : 'w-100'" class="h-100" v-if="!formaEnvio && !loading">
            <VCardText>
                <p class="text-center text-h5 mb-3">
                    {{ !curriculo.id ? 'Preencha seu currículo' :
                        'Atualize o tipo de envio do seu currículo' }}
                </p>
                <p class="text-center" v-if="!curriculo.id">
                    Você ainda não possui um currículo cadastrado.
                    Escolha se deseja enviar seu currículo em PDF ou preencher manualmente.
                </p>
                <p class="text-center" v-else>
                    Seu currículo já está cadastrado. Aqui você altera o tipo de envio do seu currículo.
                    Escolha se deseja atualizar seu currículo em PDF ou preencher manualmente.
                </p>
                <VRow>
                    <VCol cols="12" md="6">
                        <VBtn @click="handleFormaEnvio('anexo')" color="primary"
                            class="btn-altura-padrao w-100 text-none">
                            Enviar currículo em PDF
                        </VBtn>
                    </VCol>
                    <VCol cols="12" md="6">
                        <VBtn @click="handleFormaEnvio('formulario')" color="primary"
                            class="btn-altura-padrao w-100 text-none">
                            Preencher manualmente
                        </VBtn>
                    </VCol>
                    <VCol cols="12" md="6" v-if="curriculo.id">
                        <VBtn @click="getCurriculo" color="primary" variant="tonal"
                            class="btn-altura-padrao w-100 text-none mx-auto">
                            Cancelar
                        </VBtn>
                    </VCol>
                </VRow>
            </VCardText>
        </VCard>
    </v-fade-transition>

    <v-fade-transition>
        <div :class="!isMobile ? 'mx-auto w-75' : 'w-100'" class="h-100"
            v-if="!loading && !novo && !edit && formaEnvio">
            <p class="mb-4 text-h4 text-center">
                Seu currículo
            </p>
            <VCard>
                <VCardText>
                    <div class="d-flex flex-md-row gap-5 align-center position-relative">
                        <VTooltip text="Editar Dados Pessoais">
                            <template v-slot:activator="{ props }">
                                <IconBtn @click="handleEdit(1)" class="position-absolute" style="right: 0;"
                                    v-bind="props" :style="!isMobile ? 'top: 0;' : 'bottom: 0;'">
                                    <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                </IconBtn>
                            </template>
                        </VTooltip>
                        <VAvatar size="100" :color="!curriculo.foto ? 'primary' : undefined"
                            :variant="!curriculo.foto ? 'tonal' : undefined">
                            <VImg v-if="curriculo.foto" :src="curriculo.foto" cover />
                            <VIcon v-if="!curriculo.foto" icon="tabler-user" size="30" />
                        </VAvatar>
                        <div>
                            <p class="mb-1 text-h3">{{ curriculo.nomeCompleto }}</p>
                            <p class="mb-1 text-no-wrap">
                                <VIcon icon="tabler-mail" class="mr-1" />
                                {{ curriculo.email }}
                            </p>
                            <p class="mb-1">
                                <VIcon icon="tabler-phone" class="mr-1" />
                                {{ curriculo.telefone }} <br v-if="isMobile" />
                                <span v-if="curriculo.whatsapp" :class="isMobile ? 'mt-1' : ''">
                                    <VIcon icon="tabler-brand-whatsapp" class="mx-1" />
                                    {{ curriculo.whatsapp }}
                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="d-flex flex-row gap-0 align-center mt-8 mb-4" v-if="curriculo.dataNascimento">
                        <p class="mb-0 font-weight-bold" style="min-width:170px;">Dados Pessoais</p>
                        <VDivider />
                    </div>
                    <p class="mb-1" v-if="curriculo.dataNascimento && moment(curriculo.dataNascimento).isValid()">
                        <VIcon icon="tabler-calendar" class="mr-1" />
                        {{ moment(curriculo.dataNascimento).format('DD/MM/YYYY') }} - {{
                            moment().diff(curriculo.dataNascimento, 'years') }}
                        anos
                    </p>
                    <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                        <p class="mb-0 font-weight-bold" style="min-width:100px;">Endereço</p>
                        <VDivider />
                    </div>
                    <p class="mb-1 position-relative">
                        <VTooltip text="Editar Endereço">
                            <template v-slot:activator="{ props }">
                                <IconBtn @click="handleEdit(2)" class="position-absolute" style="top: 0; right: 0;"
                                    v-bind="props">
                                    <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                </IconBtn>
                            </template>
                        </VTooltip>
                        <VIcon icon="tabler-map-pin" class="mr-1" />
                        {{ curriculo.endereco.street }}, {{ curriculo.endereco.number }} - {{
                            curriculo.endereco.neighborhood }},
                        {{ curriculo.endereco.city }}/{{ curriculo.endereco.state }}
                        {{ curriculo.endereco.complement ? ' - '
                            + curriculo.endereco.complement : '' }}
                    </p>
                    <div class="d-flex flex-row gap-0 align-center mt-8 mb-4"
                        v-if="curriculo.experienciaProfissional && curriculo.experienciaProfissional.length">
                        <p class="mb-0 font-weight-bold" style="min-width:200px;">Experiência Profissional</p>
                        <VDivider />
                    </div>
                    <div class="position-relative"
                        v-if="curriculo.experienciaProfissional && curriculo.experienciaProfissional.length">
                        <VTooltip text="Editar Experiência Profissional">
                            <template v-slot:activator="{ props }">
                                <IconBtn @click="handleEdit(formaEnvio == 'formulario' ? 8 : 3)"
                                    class="position-absolute" style="top: 0; right: 0;" v-bind="props">
                                    <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                </IconBtn>
                            </template>
                        </VTooltip>
                        <div v-for="(exp, index) in curriculo.experienciaProfissional" :key="index"
                            v-if="curriculo.experienciaProfissional && curriculo.experienciaProfissional.length">
                            <p class="mb-1">
                                <VIcon icon="tabler-briefcase" class="mr-1" />
                                {{ exp.cargo }} - {{ exp.empresa }}
                            </p>
                            <p class="mb-1">
                                <VIcon icon="tabler-calendar" class="mr-1" />
                                {{ exp.inicio }} - {{ exp.fim }}
                            </p>
                            <p class="mb-1">
                                <VIcon icon="tabler-info-circle" class="mr-1" />
                                {{ exp.descricao }}
                            </p>
                        </div>
                    </div>
                    <template v-if="formaEnvio && formaEnvio == 'formulario'">
                        <div v-if="curriculo.pcd && curriculo.pcd?.descricao">
                            <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                                <p class="mb-0 font-weight-bold" style="min-width:50px;">
                                    PCD
                                </p>
                                <VDivider />
                            </div>
                            <div class="position-relative">
                                <VTooltip text="Editar informações PCD">
                                    <template v-slot:activator="{ props }">
                                        <IconBtn @click="handleEdit(3)" class="position-absolute"
                                            style="top: 0; right: 0;" v-bind="props">
                                            <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                        </IconBtn>
                                    </template>
                                </VTooltip>
                                <p class="mb-1">
                                    <VIcon icon="tabler-wheelchair" class="mr-1" />
                                    {{ curriculo.pcd.tipos.join(', ') }}
                                </p>
                                <p class="mb-1">
                                    <VIcon icon="tabler-info-circle" class="mr-1" />
                                    {{ curriculo.pcd.descricao }}
                                </p>
                            </div>
                        </div>
                        <div v-if="curriculo.redesSociais && curriculo.redesSociais?.length">
                            <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                                <p class="mb-0 font-weight-bold" style="min-width:150px;">
                                    Redes Sociais
                                </p>
                                <VDivider />
                            </div>
                            <div class="position-relative">
                                <VTooltip text="Editar Redes Sociais">
                                    <template v-slot:activator="{ props }">
                                        <IconBtn @click="handleEdit(3)" class="position-absolute"
                                            style="top: 0; right: 0;" v-bind="props">
                                            <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                        </IconBtn>
                                    </template>
                                </VTooltip>
                                <div v-for="(rede, index) in curriculo.redesSociais" :key="index">
                                    <p class="mb-1">
                                        <VIcon :icon="`tabler-brand-${rede.nome.toLowerCase()}`" class="mr-1" />
                                        {{ rede.link }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div v-if="curriculo.pretensaoSalarial">
                            <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                                <p class="mb-0 font-weight-bold" style="min-width:150px;">
                                    Pretensão Salarial
                                </p>
                                <VDivider />
                            </div>
                            <div class="position-relative">
                                <VTooltip text="Editar Pretensão Salarial">
                                    <template v-slot:activator="{ props }">
                                        <IconBtn @click="handleEdit(4)" class="position-absolute"
                                            style="top: 0; right: 0;" v-bind="props">
                                            <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                        </IconBtn>
                                    </template>
                                </VTooltip>
                                <p class="mb-1" v-if="curriculo.pretensaoSalarial > 0">
                                    <VIcon icon="tabler-coin" class="mr-1" />
                                    {{ new Intl.NumberFormat('pt-BR', {
                                        style: 'currency', currency: 'BRL'
                                    }).format(curriculo.pretensaoSalarial) }}
                                </p>
                                <p class="mb-1" v-else>
                                    <VIcon icon="tabler-coin" class="mr-1" />
                                    A combinar
                                </p>
                            </div>
                        </div>
                        <div v-if="curriculo.resumoProfissional">
                            <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                                <p class="mb-0 font-weight-bold" style="min-width:150px;">
                                    Resumo Profissional
                                </p>
                                <VDivider />
                            </div>
                            <div class="position-relative">
                                <VTooltip text="Editar Resumo Profissional">
                                    <template v-slot:activator="{ props }">
                                        <IconBtn @click="handleEdit(4)" class="position-absolute"
                                            style="top: 0; right: 0;" v-bind="props">
                                            <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                        </IconBtn>
                                    </template>
                                </VTooltip>
                                <p class="mb-1">
                                    <VIcon icon="tabler-file-text" class="mr-1" />
                                    {{ curriculo.resumoProfissional }}
                                </p>
                            </div>
                        </div>
                        <div v-if="curriculo.escolaridade && curriculo.escolaridade?.nivel">
                            <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                                <p class="mb-0 font-weight-bold" style="min-width:150px;">
                                    Escolaridade
                                </p>
                                <VDivider />
                            </div>
                            <div class="position-relative">
                                <VTooltip text="Editar Escolaridade">
                                    <template v-slot:activator="{ props }">
                                        <IconBtn @click="handleEdit(5)" class="position-absolute"
                                            style="top: 0; right: 0;" v-bind="props">
                                            <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                        </IconBtn>
                                    </template>
                                </VTooltip>
                                <p class="mb-1">
                                    <VIcon icon="tabler-school" class="mr-1" />
                                    {{ curriculo.escolaridade.nivel }}
                                </p>
                                <p class="mb-1">
                                    <VIcon icon="tabler-building" class="mr-1" />
                                    {{ curriculo.escolaridade.instituicao }}
                                </p>
                                <p class="mb-1">
                                    <VIcon icon="tabler-calendar" class="mr-1" />
                                    {{ curriculo.escolaridade.inicio }} - {{ curriculo.escolaridade.fim }}
                                </p>
                                <p class="mb-1">
                                    <VIcon icon="tabler-info-circle" class="mr-1" />
                                    {{ curriculo.escolaridade.status }}
                                </p>
                                <p class="mb-1">
                                    <VIcon icon="tabler-clock" class="mr-1" />
                                    {{ curriculo.escolaridade.duracao }}
                                </p>
                                <p class="mb-1">
                                    <VIcon icon="tabler-globe" class="mr-1" />
                                    {{ curriculo.escolaridade.paisOndeCursou }}
                                </p>
                                <p class="mb-1">
                                    <VIcon icon="tabler-map-pin" class="mr-1" />
                                    {{ curriculo.escolaridade.cidadeOndeCursou }}/{{ curriculo.escolaridade.ufOndeCursou
                                    }}
                                </p>
                            </div>
                        </div>
                        <div v-if="curriculo.cursos && curriculo.cursos.length">
                            <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                                <p class="mb-0 font-weight-bold" style="min-width:150px;">
                                    Cursos
                                </p>
                                <VDivider />
                            </div>
                            <div class="position-relative">
                                <VTooltip text="Editar Cursos">
                                    <template v-slot:activator="{ props }">
                                        <IconBtn @click="handleEdit(6)" class="position-absolute"
                                            style="top: 0; right: 0;" v-bind="props">
                                            <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                        </IconBtn>
                                    </template>
                                </VTooltip>
                                <div v-for="(curso, index) in curriculo.cursos" :key="index">
                                    <p class="mb-1">
                                        <VIcon icon="tabler-book" class="mr-1" />
                                        {{ curso.nome }}
                                    </p>
                                    <p class="mb-1">
                                        <VIcon icon="tabler-building" class="mr-1" />
                                        {{ curso.instituicao }}
                                    </p>
                                    <p class="mb-1">
                                        <VIcon icon="tabler-calendar" class="mr-1" />
                                        {{ curso.inicio }} - {{ curso.fim }}
                                    </p>
                                    <p class="mb-1">
                                        <VIcon icon="tabler-info-circle" class="mr-1" />
                                        {{ curso.status }}
                                    </p>
                                    <p class="mb-1">
                                        <VIcon icon="tabler-clock" class="mr-1" />
                                        {{ curso.duracao }}
                                    </p>
                                    <p class="mb-1">
                                        <VIcon icon="tabler-globe" class="mr-1" />
                                        {{ curso.paisOndeCursou }}
                                    </p>
                                    <p class="mb-1">
                                        <VIcon icon="tabler-map-pin" class="mr-1" />
                                        {{ curso.cidadeOndeCursou }}/{{ curso.ufOndeCursou }}
                                    </p>
                                    <VDivider class="my-3" v-if="index < curriculo.cursos.length - 1" />
                                </div>
                            </div>
                        </div>
                        <div v-if="curriculo.idiomas && curriculo.idiomas.length">
                            <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                                <p class="mb-0 font-weight-bold" style="min-width:150px;">
                                    Idiomas
                                </p>
                                <VDivider />
                            </div>
                            <div class="position-relative">
                                <VTooltip text="Editar Idiomas">
                                    <template v-slot:activator="{ props }">
                                        <IconBtn @click="handleEdit(7)" class="position-absolute"
                                            style="top: 0; right: 0;" v-bind="props">
                                            <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                        </IconBtn>
                                    </template>
                                </VTooltip>
                                <div v-for="(idioma, index) in curriculo.idiomas" :key="index">
                                    <p class="mb-1">
                                        <VIcon icon="tabler-language" class="mr-1" />
                                        {{ idioma.nome }} - {{ idioma.nivel }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div v-if="curriculo.habilidades && curriculo.habilidades.length">
                            <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                                <p class="mb-0 font-weight-bold" style="min-width:150px;">
                                    Habilidades
                                </p>
                                <VDivider />
                            </div>
                            <div class="position-relative">
                                <VTooltip text="Editar Habilidades">
                                    <template v-slot:activator="{ props }">
                                        <IconBtn @click="handleEdit(9)" class="position-absolute"
                                            style="top: 0; right: 0;" v-bind="props">
                                            <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                        </IconBtn>
                                    </template>
                                </VTooltip>
                                <div v-for="(habilidade, index) in curriculo.habilidades" :key="index">
                                    <p class="mb-1">
                                        <VIcon icon="tabler-star" class="mr-1" />
                                        {{ habilidade }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="formaEnvio && formaEnvio == 'anexo'">
                        <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                            <p class="mb-0 font-weight-bold" style="min-width:150px;">Currículo Anexado</p>
                            <VDivider />
                        </div>
                        <div class="position-relative">
                            <VTooltip text="Editar Currículo Anexo">
                                <template v-slot:activator="{ props }">
                                    <IconBtn @click="handleEdit(4)" class="position-absolute" style="top: 0; right: 0;"
                                        v-bind="props">
                                        <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                    </IconBtn>
                                </template>
                            </VTooltip>
                            <p class="mb-1">
                                <VIcon icon="tabler-file-text" class="mr-1" />
                                {{ nomeCurriculoAnexo(curriculo.curriculoAnexo) }}
                            </p>
                        </div>
                    </template>
                    <div class="d-flex flex-row gap-0 align-center mt-8 mb-4">
                        <p class="mb-0 font-weight-bold" style="min-width:150px;">Tipo de Currículo</p>
                        <VDivider />
                    </div>
                    <div class="position-relative">
                        <VTooltip text="Editar Currículo Anexo">
                            <template v-slot:activator="{ props }">
                                <IconBtn @click="formaEnvio = null" class="position-absolute" style="top: 0; right: 0;"
                                    v-bind="props">
                                    <VIcon icon="tabler-edit" :size="isMobile ? 30 : 25" />
                                </IconBtn>
                            </template>
                        </VTooltip>
                        <p class="mb-1">
                            <VIcon icon="tabler-file-text" class="mr-1" />
                            {{ curriculo.hasAnexo ? 'Anexado' : 'Criado no AkkiPerto' }}
                        </p>
                    </div>
                    <VBtn @click="handleEditAll" color="primary" class="btn-altura-padrao w-100 text-none mt-8">
                        Editar Currículo
                    </VBtn>
                </VCardText>
            </VCard>
        </div>
    </v-fade-transition>

    <v-fade-transition>
        <VCard :class="!isMobile ? 'mx-auto w-75' : 'w-100'" class="h-100"
            v-if="!loading && formaEnvio && (novo || edit)">
            <VCardText>
                <v-progress-linear v-model="andamento" class="mb-2" :height="10" v-if="novo" />
                <p class="mb-4 text-caption text-center">
                    <span style="color: red;">*</span> Campos obrigatórios
                </p>
                <v-slide-x-transition>
                    <div v-if="step == 1">
                        <p class="font-weight-bold mb-6">
                            Informações Pessoais
                        </p>
                        <VRow>
                            <VCol cols="12" class="d-flex flex-row gap-6">
                                <v-hover>
                                    <template v-slot:default="{ isHovering, props }">
                                        <VAvatar size="80" class="cursor-pointer"
                                            :color="!curriculo.foto || isHovering ? 'primary' : undefined"
                                            :variant="!curriculo.foto || isHovering ? 'tonal' : undefined"
                                            @click="inputAvatar?.click()" v-bind="props">
                                            <v-slide-x-transition>
                                                <VImg v-if="curriculo.foto && !isHovering" :src="curriculo.foto"
                                                    cover />
                                            </v-slide-x-transition>
                                            <v-slide-x-transition>
                                                <VIcon v-if="!curriculo.foto || isHovering"
                                                    :icon="!isHovering ? 'tabler-user' : !curriculo.foto ? 'tabler-upload' : 'tabler-pencil'"
                                                    size="30" />
                                            </v-slide-x-transition>
                                        </VAvatar>
                                    </template>
                                </v-hover>
                                <!-- 👉 Upload Photo -->
                                <div class="d-flex flex-column justify-center gap-4">
                                    <p class="text-h6 mb-0">Sua foto</p>
                                    <div class="d-flex flex-wrap gap-2">
                                        <VBtn color="primary" @click="inputAvatar?.click()">
                                            <VIcon icon="tabler-cloud-upload" class="d-sm-none" />
                                            <span>Enviar nova foto</span>
                                        </VBtn>
                                        <input ref="inputAvatar" type="file" name="file" accept=".jpeg,.png,.jpg" hidden
                                            @change="changeAvatar($event)" />
                                    </div>
                                </div>
                            </VCol>
                            <VCol cols="12" sm="9">
                                <p class="mb-1">Nome Completo <span style="color: red;">*</span>
                                </p>
                                <VTextField v-model="curriculo.nomeCompleto" outlined dense
                                    placeholder="Insira seu nome completo" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" sm="3">
                                <p class="mb-1">
                                    Data de Nascimento
                                </p>
                                <!-- <VTextField v-model="curriculo.dataNascimento" outlined dense type="date" /> -->
                                <VueDatePicker v-model="curriculo.dataNascimento" locale="pt-br" auto-apply
                                    placeholder="Selecione sua data de nascimento" teleport :time="false"
                                    :enable-time-picker="false" position="center">
                                </VueDatePicker>
                            </VCol>
                            <VDivider class="mt-3" />
                            <VCol cols="12">
                                <p class="my-2 font-weight-bold">Informações de contato</p>
                            </VCol>
                            <VCol cols="12">
                                <p class="mb-1">E-mail <span style="color: red;">*</span></p>
                                <VTextField v-model="curriculo.email" outlined dense placeholder="Insira seu e-mail"
                                    :rules="[requiredValidator, emailValidator]" />
                            </VCol>
                            <VCol cols="12" sm="6">
                                <p class="mb-1">Telefone <span style="color: red;">*</span></p>
                                <VTextField v-model="curriculo.telefone" outlined dense
                                    placeholder="Insira seu telefone" v-mask="'(##) #####-####'"
                                    :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" sm="6">
                                <p class="mb-1">WhatsApp</p>
                                <VTextField v-model="curriculo.whatsapp" outlined dense
                                    placeholder="Insira seu WhatsApp" v-mask="'(##) #####-####'" />
                            </VCol>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 2">
                        <p class="font-weight-bold mb-6">
                            Endereço
                        </p>
                        <VRow>
                            <VCol cols="12" sm="3">
                                <p class="mb-1">CEP <span style="color: red;">*</span></p>
                                <VTextField v-model="curriculo.endereco.cep" outlined dense placeholder="Insira seu CEP"
                                    v-mask="'#####-###'" @update:model-value="getCep" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" sm="9">
                                <p class="mb-1">Rua <span style="color: red;">*</span></p>
                                <VTextField v-model="curriculo.endereco.street" outlined dense
                                    placeholder="Insira sua rua" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" sm="3">
                                <p class="mb-1">Número <span style="color: red;">*</span></p>
                                <VTextField v-model="curriculo.endereco.number" outlined dense
                                    placeholder="Insira o número" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" sm="4">
                                <p class="mb-1">Bairro <span style="color: red;">*</span></p>
                                <VTextField v-model="curriculo.endereco.neighborhood" outlined dense
                                    placeholder="Insira seu bairro" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" sm="5">
                                <p class="mb-1">Complemento</p>
                                <VTextField v-model="curriculo.endereco.complement" outlined dense
                                    placeholder="Insira o complemento" />
                            </VCol>
                            <VCol cols="12" sm="6">
                                <p class="mb-1">Cidade <span style="color: red;">*</span></p>
                                <VSelect v-model="curriculo.endereco.city" outlined dense :items="cidades"
                                    item-text="nome" item-value="nome" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol cols="12" sm="6">
                                <p class="mb-1">Estado <span style="color: red;">*</span></p>
                                <VSelect v-model="curriculo.endereco.state" outlined dense :items="estados"
                                    item-title="text" item-value="value" @change="cidadesList(curriculo.endereco.state)"
                                    :rules="[requiredValidator]" />
                            </VCol>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 4 && formaEnvio == 'anexo'">
                        <p class="font-weight-bold mb-4">
                            Envie seu currículo em PDF <span style="color: red;">*</span>
                        </p>
                        <p class="mb-0">
                            {{ curriculo.curriculoAnexo ?
                                nomeCurriculoAnexo(curriculo.curriculoAnexo) :
                                'Envie seu currículo clicando no botão abaixo' }}
                        </p>
                        <VBtn @click="inputCurriculo?.click()" color="primary" class="mt-4 btn-altura-padrao">
                            <VIcon :icon="curriculo.curriculoAnexo ? 'tabler-switch-2' : 'tabler-cloud-upload'"
                                class="mr-1" />
                            {{ curriculo.curriculoAnexo ? 'Trocar Currículo' : 'Enviar currículo' }}
                        </VBtn>
                        <input ref="inputCurriculo" type="file" name="file" accept=".pdf" hidden
                            @change="changeCurriculoAnexo($event)" />
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 3 && formaEnvio == 'formulario'">
                        <VRow>
                            <VCol cols="12">
                                <p class="mt-2 font-weight-bold mb-5 d-flex flex-row gap-4">
                                    Pessoa com Deficiência (PCD)
                                </p>
                                <p class="mb-0">Você possui alguma deficiência?</p>
                                <div class="d-flex flex-wrap gap-3 mb-2">
                                    <VCheckbox v-model="isPCD" label="Sim" :value="true" />
                                    <VCheckbox v-model="isPCD" label="Não" :value="false" />
                                </div>
                            </VCol>
                            <VCol cols="12" v-if="isPCD">
                                <p class="mb-1">Tipo de deficiência</p>
                                <VSelect v-model="curriculo.pcd.tipos" outlined dense :items="itensPcd" multiple
                                    placeholder="Selecione as deficiências que possuí" />
                            </VCol>
                            <VCol cols="12" v-if="isPCD">
                                <p class="mb-1">Observações e necessidades</p>
                                <VTextarea rows="4" v-model="curriculo.pcd.descricao" outlined dense
                                    placeholder="Descreva condições especiais e também sua deficiência." />
                            </VCol>
                            <VDivider class="mb-3" />
                            <VCol cols="12">
                                <p class="mb-2 font-weight-bold">
                                    Redes Sociais
                                    <VBtn color="primary" @click="addRedeSocial" class="ml-2" size="small"
                                        variant="tonal">
                                        <VIcon icon="tabler-plus" />
                                        Adicionar
                                    </VBtn>
                                </p>
                            </VCol>
                            <VCol cols="12">
                                <VRow v-for="(rede, index) in curriculo.redesSociais" :key="index"
                                    v-if="curriculo.redesSociais.length > 0">
                                    <VCol cols="12" sm="3">
                                        <p class="mb-1">Rede</p>
                                        <VSelect v-model="rede.nome" outlined dense :items="itensRedesSociais"
                                            item-title="text" item-value="value" />
                                    </VCol>
                                    <VCol cols="12" sm="8">
                                        <p class="mb-1">Link</p>
                                        <VTextField v-model="rede.link" outlined dense placeholder="Insira o link" />
                                    </VCol>
                                    <VCol cols="12" sm="1">
                                        <p class="mb-1" style="opacity: 0;">Link</p>
                                        <VBtn color="error" variant="tonal" class="w-100"
                                            @click="removeRedeSocial(index)">
                                            <VIcon icon="tabler-trash" />
                                        </VBtn>
                                    </VCol>
                                </VRow>
                                <p class="text-disabled" v-else>Nenhuma rede social cadastrada</p>
                            </VCol>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 4 && formaEnvio == 'formulario'">
                        <p class="font-weight-bold mb-6">
                            Objetivos Profissionais
                        </p>
                        <VRow>
                            <VCol cols="12">
                                <p class="mb-1">Pretensão Salarial</p>
                                <Dinheiro v-model="curriculo.pretensaoSalarial" />
                                <p class="mb-0 mt-1 text-caption">Deixe em branco ou zerado para não informar</p>
                            </VCol>
                            <VCol cols="12">
                                <p class="mb-1">Resumo Profissional</p>
                                <VTextarea rows="4" v-model="curriculo.resumoProfissional" outlined dense active
                                    placeholder="Descreva um resumo sobre sua carreira e experiências." />
                            </VCol>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 5 && formaEnvio == 'formulario'">
                        <p class="font-weight-bold mb-6">
                            Formação Acadêmica
                        </p>
                        <VRow>
                            <VCol cols="12">
                                <p class="mb-1">Nível da escolaridade</p>
                                <VSelect v-model="curriculo.escolaridade.nivel" outlined dense
                                    :items="nivelEscolaridadeItens" placeholder="Selecione o nível de escolaridade" />
                            </VCol>
                            <v-expand-transition>
                                <VCol cols="12" sm="6"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">Instituição</p>
                                    <VTextField v-model="curriculo.escolaridade.instituicao" outlined dense
                                        placeholder="Insira o nome da instituição" />
                                </VCol>
                            </v-expand-transition>
                            <v-expand-transition>
                                <VCol cols="12" sm="6"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">Curso</p>
                                    <VTextField v-model="curriculo.escolaridade.curso" outlined dense
                                        placeholder="Insira o nome do curso" />
                                </VCol>
                            </v-expand-transition>
                            <v-expand-transition>
                                <VCol cols="12" sm="6"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">Início</p>
                                    <VTextField v-model="curriculo.escolaridade.inicio" outlined dense type="date" />
                                </VCol>
                            </v-expand-transition>
                            <v-expand-transition>
                                <VCol cols="12" sm="6"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">Fim</p>
                                    <VTextField v-model="curriculo.escolaridade.fim" outlined dense type="date" />
                                </VCol>
                            </v-expand-transition>
                            <v-expand-transition>
                                <VCol cols="12" sm="6"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">Situação</p>
                                    <VSelect v-model="curriculo.escolaridade.status" outlined dense
                                        :items="['Interrompido', 'Concluído', 'Cursando']"
                                        placeholder="Selecione a situação" />
                                </VCol>
                            </v-expand-transition>
                            <v-expand-transition>
                                <VCol cols="12" sm="6"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">Duração</p>
                                    <VSelect v-model="curriculo.escolaridade.duracao" outlined dense
                                        :items="['Curta (até 40 horas)', 'Média (de 40 horas até 300 horas)', 'Longa (acima de 300 horas)']"
                                        placeholder="Selecione a duração" />
                                </VCol>
                            </v-expand-transition>
                            <v-expand-transition>
                                <VCol cols="12" sm="4"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">Cidade</p>
                                    <VTextField v-model="curriculo.escolaridade.cidadeOndeCursou" outlined dense
                                        placeholder="Insira a cidade onde cursou" />
                                </VCol>
                            </v-expand-transition>
                            <v-expand-transition>
                                <VCol cols="12" sm="4"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">Estado</p>
                                    <VTextField v-model="curriculo.escolaridade.ufOndeCursou" outlined dense
                                        placeholder="Insira o estado onde cursou" />
                                </VCol>
                            </v-expand-transition>
                            <v-expand-transition>
                                <VCol cols="12" sm="4"
                                    v-if="curriculo.escolaridade.nivel && curriculo.escolaridade.nivel !== 'Não informar'">
                                    <p class="mb-1">País</p>
                                    <VTextField v-model="curriculo.escolaridade.paisOndeCursou" outlined dense
                                        placeholder="Insira o país onde cursou" />
                                </VCol>
                            </v-expand-transition>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 6 && formaEnvio == 'formulario'">
                        <p class="font-weight-bold mb-6">
                            Cursos Complementares
                        </p>
                        <VRow>
                            <VCol cols="12">
                                <VRow v-for="(curso, index) in curriculo.cursos" :key="index"
                                    v-if="curriculo.cursos?.length > 0">
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1">Nome do curso</p>
                                        <VTextField v-model="curso.nome" outlined dense
                                            placeholder="Insira o nome do curso" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1">Instituição</p>
                                        <VTextField v-model="curso.instituicao" outlined dense
                                            placeholder="Insira o nome da instituição" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1">Início</p>
                                        <VTextField v-model="curso.inicio" outlined dense type="date" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1">Fim</p>
                                        <VTextField v-model="curso.fim" outlined dense type="date" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1">Situação</p>
                                        <VSelect v-model="curso.status" outlined dense
                                            :items="['Interrompido', 'Concluído', 'Cursando']"
                                            placeholder="Selecione a situação" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1">Duração</p>
                                        <VSelect v-model="curso.duracao" outlined dense
                                            :items="['Curta (até 40 horas)', 'Média (de 40 horas até 300 horas)', 'Longa (acima de 300 horas)']"
                                            placeholder="Selecione a duração" />
                                    </VCol>
                                    <VCol cols="12" sm="4">
                                        <p class="mb-1">Cidade onde cursou</p>
                                        <VTextField v-model="curso.cidadeOndeCursou" outlined dense
                                            placeholder="Insira a cidade onde cursou" />
                                    </VCol>
                                    <VCol cols="12" sm="4">
                                        <p class="mb-1">UF onde cursou</p>
                                        <VTextField v-model="curso.ufOndeCursou" outlined dense
                                            placeholder="Insira o estado onde cursou" />
                                    </VCol>
                                    <VCol cols="12" sm="4">
                                        <p class="mb-1">País onde cursou</p>
                                        <VTextField v-model="curso.paisOndeCursou" outlined dense
                                            placeholder="Insira o país onde cursou" />
                                    </VCol>
                                    <VCol cols="12" class="d-flex justify-end">
                                        <VBtn color="error" variant="tonal" @click="removeCurso(index)">
                                            <VIcon icon="tabler-trash" />
                                            Remover
                                        </VBtn>
                                    </VCol>
                                    <VCol cols="12"
                                        v-if="curriculo.cursos?.length > 1 && index !== curriculo.cursos?.length - 1">
                                        <VDivider class="mb-3" />
                                    </VCol>
                                </VRow>
                                <p class="text-disabled" v-else>
                                    Nenhum curso cadastrado. Recomendamos que preencha os cursos
                                    complementares que tenha para aumentar suas chances de obter vagas.
                                </p>
                                <div class="w-100 d-flex justify-center align-center">
                                    <VBtn color="primary" variant="tonal" @click="addCurso"
                                        :class="!isMobile ? 'w-50' : 'w-100'">
                                        <VIcon icon="tabler-plus" />
                                        Adicionar Curso
                                    </VBtn>
                                </div>
                            </VCol>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 7 && formaEnvio == 'formulario'">
                        <p class="font-weight-bold mb-6">
                            Idiomas
                        </p>
                        <VRow>
                            <VCol cols="12">
                                <VRow v-for="(idioma, index) in curriculo.idiomas" :key="index"
                                    v-if="curriculo.idiomas?.length > 0">
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1 font-weight-bold">Idioma</p>
                                        <VTextField v-model="idioma.nome" outlined dense
                                            placeholder="Insira o idioma" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1 font-weight-bold">Nível</p>
                                        <VSelect v-model="idioma.nivel" outlined dense
                                            :items="['Básico', 'Intermediário', 'Avançado', 'Fluente']"
                                            placeholder="Selecione o nível" />
                                    </VCol>
                                    <VCol cols="12" class="d-flex justify-end">
                                        <VBtn color="error" variant="tonal" @click="removeIdioma(index)">
                                            <VIcon icon="tabler-trash" />
                                            Remover
                                        </VBtn>
                                    </VCol>
                                    <VCol cols="12"
                                        v-if="curriculo.idiomas?.length > 1 && index !== curriculo.idiomas?.length - 1">
                                        <VDivider class="mb-3" />
                                    </VCol>
                                </VRow>
                                <p class="text-disabled" v-else>
                                    Nenhum idioma cadastrado. Recomendamos que preencha os idiomas que tenha
                                    para aumentar suas chances de obter vagas.
                                </p>
                                <div class="w-100 d-flex justify-center align-center">
                                    <VBtn color="primary" variant="tonal" @click="addIdioma"
                                        :class="!isMobile ? 'w-50' : 'w-100'">
                                        <VIcon icon="tabler-plus" />
                                        Adicionar Idioma
                                    </VBtn>
                                </div>
                            </VCol>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 8 && formaEnvio == 'formulario' || step == 3 && formaEnvio == 'anexo'">
                        <p class="font-weight-bold mb-6">
                            Experiência Profissional
                        </p>
                        <VRow>
                            <VCol cols="12">
                                <VRow v-for="(exp, index) in curriculo.experienciaProfissional" :key="index"
                                    v-if="curriculo.experienciaProfissional?.length > 0">
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1 font-weight-bold">Empresa</p>
                                        <VTextField v-model="exp.empresa" outlined dense
                                            placeholder="Insira o nome da empresa" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1 font-weight-bold">Cargo</p>
                                        <VTextField v-model="exp.cargo" outlined dense placeholder="Insira o cargo" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1 font-weight-bold">Início</p>
                                        <VTextField v-model="exp.inicio" outlined dense type="date" />
                                    </VCol>
                                    <VCol cols="12" sm="6">
                                        <p class="mb-1 font-weight-bold">Fim</p>
                                        <VTextField v-model="exp.fim" outlined dense type="date" />
                                    </VCol>
                                    <VCol cols="12" sm="12">
                                        <p class="mb-1 font-weight-bold">Descrição</p>
                                        <VTextarea v-model="exp.descricao" outlined dense rows="4"
                                            placeholder="Descreva suas atividades e responsabilidades." />
                                    </VCol>
                                    <VCol cols="12" class="d-flex justify-end">
                                        <VBtn color="error" variant="tonal" @click="removeExperiencia(index)">
                                            <VIcon icon="tabler-trash" />
                                            Remover
                                        </VBtn>
                                    </VCol>
                                    <VCol cols="12"
                                        v-if="curriculo.experienciaProfissional?.length > 1 && index !== curriculo.experienciaProfissional?.length - 1">
                                        <VDivider class="mb-3" />
                                    </VCol>
                                </VRow>
                                <p class="text-disabled" v-else>
                                    Nenhuma experiência profissional cadastrada. Recomendamos que preencha as
                                    experiências profissionais que tenha para aumentar suas chances de
                                    obter vagas.
                                </p>
                                <div class="w-100 d-flex justify-center align-center">
                                    <VBtn color="primary" variant="tonal" @click="addExperiencia"
                                        :class="!isMobile ? 'w-50' : 'w-100'">
                                        <VIcon icon="tabler-plus" />
                                        Adicionar Experiência
                                    </VBtn>
                                </div>
                            </VCol>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 9 && formaEnvio == 'formulario'">
                        <p class="font-weight-bold mb-6">
                            Habilidades
                        </p>
                        <VRow>
                            <VCol cols="12">
                                <div class="d-flex flex-row gap-2 mt-3 mb-6">
                                    <VTextField v-model="habilidadeText" outlined dense
                                        placeholder="Insira sua habilidade" clearable />
                                    <VBtn color="primary" @click="addHabilidade" variant="tonal">
                                        <VIcon icon="tabler-plus" />
                                        Adicionar Habilidade
                                    </VBtn>
                                </div>
                                <p class="mb-1 font-weight-bold">Habilidades {{ '(' + curriculo.habilidades?.length +
                                    ')' }}
                                </p>
                                <VChip v-for="(habilidade, index) in curriculo.habilidades" :key="index"
                                    class="mt-2 mr-2" color="primary" label closable close-icon="tabler-trash"
                                    @click:close="removeHabilidade(index)">
                                    {{ habilidade }}
                                </VChip>
                            </VCol>
                        </VRow>
                    </div>
                </v-slide-x-transition>
                <v-slide-x-transition>
                    <div v-if="step == 10 && formaEnvio == 'formulario' || step == 5 && formaEnvio == 'anexo'">
                        <p class="mb-0 text-center">
                            <VIcon icon="tabler-circle-check-filled" size="80" color="success" />
                        </p>
                        <p class="mb-4 text-h4 text-center">
                            Seu currículo está pronto!
                        </p>
                        <p class="mb-0 text-center">
                            Clique em "Salvar Currículo" para finalizar! <br>
                            Você pode editar seu currículo a qualquer momento.
                        </p>
                    </div>
                </v-slide-x-transition>
                <div class="mt-5">
                    <p class="mb-2 text-center text-caption" v-if="step !== 10 && !edit">
                        Caso não tenha campos obrigatórios, você pode pular a etapa!
                    </p>
                    <VBtn @click="nextStep" color="primary" class="btn-altura-padrao w-100 text-none mb-3"
                        :loading="loadingSave">
                        {{ step == 10 && formaEnvio == 'formulario' || step == 5 && formaEnvio == 'anexo' || edit ?
                            'Salvar Currículo' : 'Avançar' }}
                    </VBtn>
                    <VBtn @click="prevStep" v-if="step > 1 || edit || step == 1 && curriculo.id" color="primary"
                        variant="text" class="w-100 text-none">
                        {{ !edit ? 'Voltar' : 'Cancelar' }}
                    </VBtn>
                </div>
            </VCardText>
        </VCard>
    </v-fade-transition>

</template>