<script setup>
  import { $api } from "@/utils/api";
  import { onMounted, onUnmounted, ref, toRefs } from "vue";
  import { useModalLoginOpen } from '@layouts/stores/config'
  import { useAlert } from '@/composables/useAlert'
  import { updateMetaTags, removerHTMLDescricoes } from '@/utils/seo'

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

  const router = useRouter();
  const vaga = ref(null);
  const userData = useCookie("userData").value;

  const icon = "tabler-briefcase";
  const icon2 = "tabler-map-pin";
  const icon3 = "tabler-device-laptop";
  const icon4 = "tabler-currency-dollar";

  const isMobile = ref(window.innerWidth < 768);

  const modelModalConfirmarCandidatura = ref(false);
  const dadosCandidaturaPrevia = ref(null);
  const idVagaCandidaturaPrevia = ref(null);

  const hasExp = ref(false)
  const selectedExp = ref([])

  const removerInscricao = async (id) => {
    let confirmar = confirm("Deseja realmente remover sua inscrição? Essa ação não poderá ser desfeita.");
    if (!confirmar) return;

    const body = { userId: userData.id };

    try {
      //   await axios.post(`http://localhost:3000/vagas/removerInscricao/${id}`, body);
      await $api(`/vagas/removerInscricao/${id}`, {
        method: "POST",
        body: body,
      });
      vaga.value.inscrito = false;
    } catch (error) {
      console.error("Erro ao remover inscrição:", error);
    }
  }


  const formatado = (salarioVaga) => {
    //Verificar se o salário é um número
    if (salarioVaga === null) return 'A Combinar'
    if (!isNaN(salarioVaga)) {
      let salario = Number(salarioVaga);
      return salario.toLocaleString("pt-BR", {
        style: "currency",
        currency: "BRL",
      });
    } else {
      return 'A Combinar'
    }
  }

  const curriculo = ref(null)

  const getCurriculo = async () => {
    if (!userData || !userData.id) {
      setAlert("Você precisa estar logado para se candidatar a uma vaga!", "error", "tabler-alert-triangle", 3000);
      modalLoginOpen.isOpen = true
      return;
    }

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

      if (!res) return;

      console.log('Curriculo: ', res)

      if (res && res !== 'none') {
        curriculo.value = res

        /* if(curriculo.value.experienciaProfissional && curriculo.value.experienciaProfissional.length > 0) {
          hasExp.value = true
        } */
      }

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


  const pageCandidatar = async (id) => {

    if (!userData || !userData.id) {
      setAlert("Você precisa estar logado para se candidatar a uma vaga!", "error", "tabler-alert-triangle", 3000);
      modalLoginOpen.isOpen = true
      return;
    }

    try {
      await $api(`/vagas/searchCurriculo/${userData.id}`, {
        method: "GET",
      }).then((responsee) => {
        if (responsee !== "none" && escolaridadeCheck.value && areaCheck.value && localizacaoCheck.value) {
          modelModalConfirmarCandidatura.value = true;
        } else {
          router.push({ name: "meuCurriculo", query: { vaga: vaga.value.slug } });
        }
      });
    } catch (error) { }

  };

  const onCancelConfirmCandidatura = () => {
    modelModalConfirmarCandidatura.value = false;
  }

  const editarDadosCandidatura = () => {
    router.push({ name: "meuCurriculo", query: { vaga: vaga.value.slug } });
  }

  const loadingCandidatar = ref(false);

  const confirmCandidaturaPrevia = async () => {
    if (!userData || !userData.id) {
      setAlert("Você precisa estar logado para se candidatar a uma vaga!", "error", "tabler-alert-triangle", 3000);
      modalLoginOpen.isOpen = true
      return;
    }

    if (hasExp.value && selectedExp.value.length == 0) {
      setAlert("Preencha a experiência profissional para continuar!", "error", "tabler-alert-triangle", 5000);
      return;
    }

    loadingCandidatar.value = true;

    try {
      // console.log(dadosCandidaturaPrevia);
      await $api(`/vagas/candidaturaPrevia/`, {
        method: "POST",
        body: {
          userId: userData.id,
          vagaId: vaga.value.id,
          expDestaque: selectedExp.value
        },
      }).then((response) => {
        console.log(response);
        vaga.value.inscrito = true;
        modelModalConfirmarCandidatura.value = false;

        setAlert("Candidatura confirmada com sucesso, você será informado sobre o processo via email! Boa sorte!", "success", "tabler-check", 6000);
      });
    } catch (error) { console.error("Erro ao confirmar candidatura prévia:", error); }

    loadingCandidatar.value = false;
  }

  const expireDays = ref(0);
  const expirePercent = ref(0);

  const created = async () => {
    const router = useRouter();
    const slug = router.currentRoute.value.params.slug;

    console.log("Slug:", slug);

    let query;
    let data = null;
    if (userData && userData.id !== undefined && userData.id !== null) {
      data = userData;
      query = {
        userData: JSON.stringify(data),
      };
    } else if (
      useCookie("permEndereco").value &&
      useCookie("permEndereco").value.geolocation !== undefined &&
      useCookie("permEndereco").value.geolocation !== null
    ) {
      let perm = useCookie("permEndereco").value;
      data = {
        endereco: { geolocation: perm.geolocation },
      };
      query = {
        userData: JSON.stringify(data),
      };
    }

    try {
      //   const response = await axios.get(`http://localhost:3000/vagas/${id}`)
      const response = await $api(`/vagas/v/${slug}`, {
        method: "GET",
        query: query,
      });

      console.log("Response vagas:", response);

      vaga.value = response;


      let meta = {
        title: `${vaga.value.funcao} - ${vaga.value.empresa} - Akki Perto`,
        description: removerHTMLDescricoes(vaga.value.descricao.slice(0, 100)),
        image: vaga.value.logo,
      }

      updateMetaTags(meta)


      if (vaga.value.requisitos) {
        vaga.value.requisitos = JSON.parse(vaga.value.requisitos);
      }

      if (vaga.value.beneficios) {
        vaga.value.beneficios = JSON.parse(vaga.value.beneficios);
      }

      if (vaga.value.prazo) {
        const prazo = new Date(vaga.value.prazo);
        const today = new Date();
        const diffTime = prazo - today; // Calcula a diferença diretamente
        if (diffTime < 0) {
          expireDays.value = 0; // Prazo já passou
          expirePercent.value = 100;
        } else {
          expireDays.value = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
          expirePercent.value = Math.ceil((expireDays.value / 30) * 100);
        }
      }

      console.log('Vaga: ', vaga.value);
    } catch (error) {
      console.error(`Erro na requisição: ${error}`);
    }
  }

  /*const beneficiosItens = ref([
    'Vale Alimentação',
    'Vale Refeição',
    'Vale Combustível',
    'Vale Transporte',
    'Plano de Saúde',
    'Plano Odontológico',
    'Plano de Saúde com odontológico',
    'Plano de Carreira',
    'Seguro de Vida',
    'Auxílio Creche',
    'Auxílio Educação',
    'Participação nos Lucros',
    'Home Office',
    'Horário Flexível'
  ])*/

  const beneficiosItens = [
    { title: 'Vale Alimentação', icon: 'tabler-tools-kitchen-2' },
    { title: 'Vale Refeição', icon: 'tabler-tools-kitchen-2' },
    { title: 'Vale Combustível', icon: 'tabler-car' },
    { title: 'Vale Transporte', icon: 'tabler-bus' },
    { title: 'Plano de Saúde', icon: 'tabler-heartbeat' },
    { title: 'Plano Odontológico', icon: 'tabler-dental' },
    { title: 'Plano de Saúde com odontológico', icon: 'tabler-heartbeat' },
    { title: 'Plano de Carreira', icon: 'tabler-chart-line' },
    { title: 'Seguro de Vida', icon: 'tabler-shield-check' },
    { title: 'Auxílio Creche', icon: 'tabler-baby-carriage' },
    { title: 'Auxílio Educação', icon: 'tabler-school' },
    { title: 'Participação nos Lucros', icon: 'tabler-cash' },
    { title: 'Home Office', icon: 'tabler-home' },
    { title: 'Horário Flexível', icon: 'tabler-clock' }
  ]


  const escolaridadeCheck = ref(true);
  const areaCheck = ref(true);
  const localizacaoCheck = ref(true);

  const checkUserProfile = async () => {
    /*if (!vaga.value || !curriculo.value) return false;
  
    if (vaga.value.inscrito) {
      escolaridadeCheck.value = true;
      areaCheck.value = true;
      localizacaoCheck.value = true;
      return;
    }
  
    const areaVaga = vaga.value.area;
    const areaUsuario = curriculo.value.areasInteresse;
    let areaAtendida = false;
  
    // Verificar área de interesse
    if (areaUsuario && areaUsuario.length > 0 && areaVaga && areaVaga.length > 0) {
      areaUsuario.forEach((area) => {
        if (areaVaga.includes(area)) {
          areaAtendida = true;
        }
      });
    }
    
    if(areaVaga && areaVaga.length > 0) {
      areaCheck.value = areaAtendida;
    } else {
      areaCheck.value = true
    }
  
    // Verificar escolaridade
    if (vaga.value.requisitos?.escolaridade) {
      const escolaridadeVaga = vaga.value.requisitos?.escolaridade;
      const escolaridadeUsuario = curriculo.value.escolaridade?.nivel;
      const escolaridadeAtendida = escolaridadeUsuario === escolaridadeVaga;
      escolaridadeCheck.value = escolaridadeAtendida
    } else {
      escolaridadeCheck.value = true
    }
  
    // Verificar localização
    const localizacaoVaga = vaga.value.addressVaga ? vaga.value.addressVaga?.city : null;
    const localizacaoUsuario = curriculo.value.endereco?.city;
    const localizacaoAtendida = vaga.value.formaContrato?.toLowerCase() !== 'remoto' ? localizacaoUsuario === localizacaoVaga : true;
    localizacaoCheck.value = localizacaoAtendida
  */
  }


  await created();
  await getCurriculo();
  await checkUserProfile()

  onMounted(() => {
    window.addEventListener("resize", () => {
      isMobile.value = window.innerWidth < 768;
    });
  });

  onUnmounted(() => {
    window.removeEventListener("resize", () => {
      isMobile.value = window.innerWidth < 768;
    });
  });


  let footerHeight = document.querySelector('.footer-content-container header.v-bottom-navigation')
  
  if(footerHeight && footerHeight?.offsetHeight) {
    footerHeight = footerHeight?.offsetHeight
  } else {
    footerHeight = 0
  }

  const panelsExp = ref(['exp'])
</script>

<template>
  <v-dialog max-width="600" v-model="modelModalConfirmarCandidatura">
    <v-card>
      <v-card-text>
        <h3 class="mb-0 d-flex flex-row justify-space-between align-center">
          Confirmar candidatura
          <VIcon icon="tabler-x" size="21" class="ml-auto" @click="onCancelConfirmCandidatura" />
        </h3>
        <p class="mb-4 text-caption">Clique em cada setor e confirme sua candidatura ou altere seus dados antes de
          prosseguir.</p>

        <v-expansion-panels multiple v-model="panelsExp">

          <v-expansion-panel class="mb-6 mt-4" value="exp">
            <v-expansion-panel-title color="primary">
              <p class="font-weight-bold mb-0">
                <VIcon icon="tabler-layers-difference" class="mr-1" />
                Experiência Profissional
              </p>
            </v-expansion-panel-title>

            <v-expansion-panel-text>
              <p class="mb-0 font-weight-bold mt-3">Você possuí experiência profissional para essa vaga? <span
                  class="text-error">(obrigatório)</span></p>
              <div class="d-flex flex-row gap-3">
                <VCheckbox v-model="hasExp" label="Sim" :value="true" />
                <VCheckbox v-model="hasExp" label="Não" :value="false" />
              </div>

              <v-fade-transition>
                <div class="mt-4" v-if="hasExp && curriculo?.experienciaProfissional?.length == 0">
                  <p class="mb-0" style="font-size: 14px;">
                    Suas experiências no seu cúrriculo estão vazias, atualize para continuar...
                  </p>
                  <v-btn variant="tonal" class="w-100 mt-2" @click="editarDadosCandidatura()">
                    Atualizar Currículo
                    <VIcon icon="tabler-user-edit" class="ml-2" />
                  </v-btn>
                </div>
              </v-fade-transition>

              <v-fade-transition>
                <div class="mt-4" v-if="hasExp && curriculo?.experienciaProfissional?.length > 0">
                  <p class="mb-0 font-weight-bold mt-3">Selecione as experiências que deseja destacar: <span
                      class="text-error">(obrigatório)</span></p>
                  <div v-for="(exp, index) in curriculo?.experienciaProfissional" :key="index">
                    <VCheckbox v-model="selectedExp" :label="exp.cargo + ' - ' + exp.empresa" :value="exp" />
                  </div>
                </div>
              </v-fade-transition>
            </v-expansion-panel-text>
          </v-expansion-panel>

          <v-expansion-panel class="mb-6" value="dados">
            <v-expansion-panel-title color="#E0E0E0">
              <p class="font-weight-bold mb-0">
                <VIcon icon="tabler-briefcase" class="mr-1" />
                Dados da Vaga
              </p>
            </v-expansion-panel-title>

            <v-expansion-panel-text>
              <p class="mb-1 mt-4">
                <strong>Função:</strong>
                {{ vaga.funcao }}
              </p>
              <p class="mb-1">
                <strong>Empresa:</strong>
                {{ vaga.empresa }}
              </p>
              <p class="mb-1">
                <strong>Localização:</strong>
                {{ vaga.addressVaga?.city + '/' + vaga.addressVaga?.state }}
              </p>
              <p class="mb-1">
                <strong>Salário:</strong>
                {{ formatado(vaga.salario) }}
              </p>
              <p class="mb-1">
                <strong>Modalidade:</strong>
                {{ vaga.formaContrato }}
              </p>
              <p class="mb-1">
                <strong>Contratação:</strong>
                {{ vaga.tipoVaga }}
              </p>
            </v-expansion-panel-text>
          </v-expansion-panel>

          <v-expansion-panel class="mb-6" value="dadosp">
            <v-expansion-panel-title color="#E0E0E0">
              <p class="font-weight-bold mb-0">
                <VIcon icon="tabler-user" class="mr-1" />
                Seus Dados
              </p>
            </v-expansion-panel-title>

            <v-expansion-panel-text>
              <p class="my-4 font-weight-bold d-flex flex-row align-center gap-2">
                Dados Pessoais
                <VDivider />
              </p>

              <p class="mb-1">
                <strong>Nome Completo:</strong>
                {{ curriculo?.nomeCompleto }}
              </p>

              <p class="mb-1">
                <strong>CPF:</strong>
                {{ curriculo?.cpf }}
              </p>

              <p class="mb-1">
                <strong>Data de Nascimento:</strong>
                {{ new Date(curriculo?.dataNascimento).toLocaleDateString() }}
              </p>

              <p class="mb-1">
                <strong>Telefone:</strong>
                {{ curriculo?.telefone }}
              </p>

              <p class="mb-1" v-if="curriculo?.whatsapp">
                <strong>WhatsApp:</strong>
                {{ curriculo?.whatsapp }}
              </p>

              <p class="mb-1">
                <strong>Email:</strong>
                {{ curriculo?.email }}
              </p>

              <p class="mb-1">
                <strong>Endereço:</strong>
                {{ curriculo?.endereco?.street + ', ' + curriculo?.endereco?.number + ' - '
                  + curriculo?.endereco?.neighborhood + ', '
                  + curriculo?.endereco?.city + '/' + curriculo?.endereco?.state }}
              </p>

              <p class="my-4 font-weight-bold d-flex flex-row align-center gap-2" v-if="curriculo?.escolaridade">
                Escolaridade
                <VDivider />
              </p>

              <p class="mb-1" v-if="curriculo?.escolaridade">
                <strong>{{ curriculo?.escolaridade?.curso }}</strong> de nível <strong>{{ curriculo?.escolaridade?.nivel
                  }}</strong>
                cursado na instituição <strong>{{ curriculo?.escolaridade?.instituicao }}</strong>
                em {{ curriculo?.escolaridade?.cidadeOndeCursou }}/{{ curriculo?.escolaridade?.ufOndeCursou }} - {{
                  curriculo?.escolaridade?.paisOndeCursou }}.
                com status de <strong>{{ curriculo?.escolaridade?.status }}</strong> e
                com ínicio em <strong>{{ new Date(curriculo?.escolaridade?.inicio).toLocaleDateString() }}</strong> e
                término em
                <strong>{{ new Date(curriculo?.escolaridade?.fim).toLocaleDateString() }}</strong>.
              </p>

              <p class="my-4 font-weight-bold d-flex flex-row align-center gap-2"
                v-if="curriculo?.pcd?.tiposDeficiencia">PCD
                <VDivider />
              </p>

              <p class="mb-1" v-if="curriculo?.pcd?.tiposDeficiencia">
                <strong>É PCD:</strong> {{ curriculo?.pcd?.descricao ? 'Sim' : 'Não' }}
              </p>

              <p class="mb-1" v-if="curriculo?.pcd?.tiposDeficiencia">
                <strong>Tipos de Deficiência:</strong> {{ curriculo?.pcd?.tiposDeficiencia?.join(', ') }}
              </p>

              <p class="mb-1" v-if="curriculo?.pcd?.descricao">
                <strong>Descrição da Deficiência:</strong> {{ curriculo?.pcd?.descricao }}
              </p>

              <p v-if="curriculo?.pretensaoSalarial || curriculo?.resumoProfissional"
                class="my-4 font-weight-bold d-flex flex-row align-center gap-2">
                Objetivos Profissionais
                <VDivider />
              </p>

              <p class="mb-1" v-if="curriculo?.pretensaoSalarial">
                <strong>Pretensão Salarial:</strong> {{ formatado(curriculo?.pretensaoSalarial) }}
              </p>

              <p class="mb-1" v-if="curriculo?.resumoProfissional">
                <strong>Resumo Profissional:</strong> {{ curriculo?.resumoProfissional }}
              </p>

              <p v-if="curriculo?.hasAnexo && curriculo?.curriculoAnexo" class="my-4 font-weight-bold">
                <span>Currículo anexado com sucesso
                  <VIcon icon="tabler-check" color="success" />
                </span>
              </p>

              <p v-if="curriculo?.hasAnexo && !curriculo?.curriculoAnexo" class="my-4 font-weight-bold">
                <span>Currículo não anexado
                  <VIcon icon="tabler-x" color="error" />
                </span>
              </p>

            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>


        <v-fade-transition>
          <div class="d-flex gap-3 justify-center flex-wrap">
            <v-btn variant="tonal" :class="isMobile ? 'w-100' : ''" @click="editarDadosCandidatura()">Atualizar
              Currículo</v-btn>
            <v-btn color="primary" :class="isMobile ? 'w-100' : ''" @click="confirmCandidaturaPrevia()"
              :loading="loadingCandidatar">
              Confirmar Candidatura</v-btn>
            <!-- <v-btn variant="tonal" color="error" @click="onCancelConfirmCandidatura()" text="Fechar"></v-btn>-->
          </div>
        </v-fade-transition>

      </v-card-text>
    </v-card>
  </v-dialog>

  <VRow>
    <VCol cols="12">

      <div class="d-flex flex-md-row gap-2 align-center">
        <VAvatar :color="!vaga.logo || vaga.logo == 'none' ? 'primary' : undefined" size="50"
          :variant="!vaga.logo || vaga.logo == 'none' ? 'tonal' : undefined" class="mr-2">
          <VImg v-if="vaga.logo && vaga.logo !== 'none'" :src="vaga.logo" cover />
          <VIcon v-else icon="tabler-user" size="30" />
        </VAvatar>

        <div>
          <h2 class="mb-2 mb-md-0">
            {{ vaga.funcao }}
            <VChip color="primary" class="ml-2" label style="font-size: 14px; width: fit-content !important;"
              v-if="vaga.distance">
              {{ vaga.distance.replace(' ', '') }} de você
            </VChip>
          </h2>
          <p class="mb-0 mt-0">
            <span style="font-size: 13px;">Anunciado por:</span> <br>
            <strong tyle="font-size: 14px;">{{ vaga.empresa }}</strong>
          </p>
        </div>

      </div>
    </VCol>
  </VRow>

  <VCard :style="`position: fixed; bottom: ${footerHeight - 5 + 'px'}; left: 0; z-index: 9; width: 100%;`"
    v-if="isMobile">
    <VCardText>

      <div>
        <VBtn color="primary" variant="text" class="w-100 mb-3" @click="router.push('/vagas')" style="height: 45px;">
          <VIcon icon="tabler-chevron-left" class="mr-2" />
          <span class="text-none">Voltar a lista de vagas</span>
        </VBtn>

        <p class="font-weight-bold mb-3 text-center w-100"
          v-if="(!escolaridadeCheck || !areaCheck || !localizacaoCheck) && !vaga.inscrito" style="font-size: 12px;">
          O seu perfil não atende a todos os requisitos da vaga.
        </p>

        <p class="font-weight-bold mb-3 text-success text-center w-100"
          v-if="curriculo && escolaridadeCheck && areaCheck && localizacaoCheck && !vaga.inscrito"
          style="font-size: 12px;">
          O seu perfil atende a todos os requisitos desta vaga.
        </p>

        <p class="mb-3 text-success text-center w-100" v-if="vaga.inscrito" style="font-size: 12px;">
          Você está inscrito nessa vaga
          <VIcon icon="tabler-check" class="ml-1" size="12" />
        </p>

        <p v-if="!escolaridadeCheck && !vaga.inscrito" class="mb-2 text-error">
          Vaga com nível de escolaridade mínimo de <strong>'{{ vaga.requisitos.escolaridade }}'</strong>.
        </p>

        <p v-if="!areaCheck && !vaga.inscrito" class="mb-2 text-error">
          Vaga exclusiva para candidatos com áreas de interesse em <strong>'{{ vaga.area.join(', ') }}'</strong>.
        </p>

        <p v-if="!localizacaoCheck && !vaga.inscrito" class="mb-2 text-error">
          Vaga exclusiva para candidatos de <strong>'{{ vaga.addressVaga?.city }}'</strong>.
        </p>

        <VBtn color="primary" @click="pageCandidatar(vaga.id)" v-if="!vaga.inscrito" class="w-100" style="height: 45px;"
          :loading="loadingCandidatar" :disabled="vaga.prazo && expireDays == 0">
          <span style="text-transform: none !important;" v-if="!loadingCandidatar">
            {{ curriculo ? !escolaridadeCheck || !areaCheck || !localizacaoCheck ? 'Atualize seu currículo' :
              'Candidatar-se' : 'Preencha seu currículo' }}
          </span>
          <VIcon v-else icon="tabler-loader" />
          <VIcon
            :icon="curriculo ? !escolaridadeCheck || !areaCheck || !localizacaoCheck ? 'tabler-user-edit' : 'tabler-user-plus' : 'tabler-file-text'"
            class="ml-2" />
        </VBtn>
        <VBtn color="grey" v-if="vaga.inscrito" disabled class="w-100" style="height: 45px;">
          Inscrito
          <VIcon icon="tabler-user-check" class="ml-2" />
        </VBtn>
        <VBtn color="error" @click="removerInscricao(vaga.id)" variant="tonal" class="w-100 mt-4" style="height: 45px;"
          v-if="vaga.inscrito">
          Remover Inscrição
          <VIcon icon="tabler-unlink" class="ml-2" />
        </VBtn>
      </div>

      <div v-if="vaga.prazo && expireDays > 0">
        <p class="mb-1 font-weight-normal text-center mt-3" style="font-size: 13px;">
          <i>A vaga expira em <strong>{{ expireDays }} dias!</strong></i>
        </p>
        <v-progress-linear v-model="expirePercent" :height="10" color="primary" />
      </div>

      <div v-if="vaga.prazo && expireDays == 0">
        <p class="mb-1 font-weight-normal text-center mt-3" style="font-size: 13px;">
          <i>As inscrições para esta vaga foram encerradas!</i>
        </p>
        <v-progress-linear v-model="expirePercent" :height="10" color="error" />
      </div>

    </VCardText>
  </VCard>


  <VRow>

    <VCol cols="12" md="8">

      <VCard class="mb-6">
        <VCardText>

          <p class="mb-0 font-weight-bold">Dados da Vaga</p>

          <VRow class="mt-4">

            <VCol cols="12" md="3">
              <p class="font-weight-bold mb-1">Localização</p>
              <div class="d-flex flex-row gap-2">
                <VIcon :icon="icon2" size="22" />
                <p>{{ vaga.addressVaga?.city + '/' + vaga.addressVaga?.state }}</p>
              </div>
            </VCol>
            <VCol cols="12" md="3">
              <p class="font-weight-bold mb-1">Modalidade</p>
              <div class="d-flex flex-row gap-2">
                <VIcon icon="tabler-briefcase" size="22" />
                <p>{{ vaga.formaContrato }}</p>
              </div>
            </VCol>
            <VCol cols="12" md="3">
              <p class="font-weight-bold mb-1">Contratação</p>
              <div class="d-flex flex-row gap-2">
                <VIcon :icon="icon3" size="22" />
                <p>{{ vaga.tipoVaga }}</p>
              </div>
            </VCol>
            <VCol cols="12" md="3">
              <p class="font-weight-bold mb-1">Salário</p>
              <div class="d-flex flex-row gap-2">
                <VIcon :icon="icon4" size="22" />
                <p class="mb-0">{{ formatado(vaga.salario) }}</p>
              </div>
            </VCol>

          </VRow>

        </VCardText>
      </VCard>

      <VCard class="mb-6" v-if="vaga.beneficios && vaga.beneficios.length > 0">
        <VCardText>

          <p class="mb-0 font-weight-bold">Beneficios</p>

          <VRow class="mt-4">

            <VCol cols="6" md="3" class="d-flex flex-row gap-2 align-center"
              v-for="(item, index) in beneficiosItens.filter(item => vaga.beneficios?.includes(item.title))">
              <VAvatar color="primary" size="40" variant="tonal">
                <VIcon :icon="item.icon" size="22" />
              </VAvatar>
              <p class="mb-0">{{ item.title }}</p>
            </VCol>
          </VRow>

        </VCardText>
      </VCard>

      <VCard>
        <VCardText>
          <h3 class="mb-3">Descrição</h3>
          <p class="descricao-vaga div-html-text" v-html="vaga.descricao" />
        </VCardText>
      </VCard>

    </VCol>

    <VCol cols="12" md="4" class="position-relative" v-if="!isMobile">

      <VCard style="position: sticky;top: 80px;">
        <VCardText>

          <div>
            <VBtn color="primary" variant="text" class="w-100 mb-3" @click="router.push('/vagas')"
              style="height: 45px;">
              <VIcon icon="tabler-chevron-left" class="mr-2" />
              <span class="text-none">Voltar a lista de vagas</span>
            </VBtn>

            <p class="font-weight-bold mb-3 text-center w-100"
              v-if="(!escolaridadeCheck || !areaCheck || !localizacaoCheck) && !vaga.inscrito" style="font-size: 12px;">
              O seu perfil não atende a todos os requisitos da vaga.
            </p>

            <p class="font-weight-bold mb-3 text-success text-center w-100"
              v-if="curriculo && escolaridadeCheck && areaCheck && localizacaoCheck && !vaga.inscrito"
              style="font-size: 12px;">
              O seu perfil atende a todos os requisitos desta vaga.
            </p>

            <p class="mb-3 text-success text-center w-100" v-if="vaga.inscrito" style="font-size: 12px;">
              Você está inscrito nessa vaga
              <VIcon icon="tabler-check" class="ml-1" size="12" />
            </p>

            <p v-if="!escolaridadeCheck && !vaga.inscrito" class="mb-2 text-error">
              Vaga com nível de escolaridade mínimo de <strong>'{{ vaga.requisitos.escolaridade }}'</strong>.
            </p>

            <p v-if="!areaCheck && !vaga.inscrito" class="mb-2 text-error">
              Vaga exclusiva para candidatos com áreas de interesse em <strong>'{{ vaga.area.join(', ') }}'</strong>.
            </p>

            <p v-if="!localizacaoCheck && !vaga.inscrito" class="mb-2 text-error">
              Vaga exclusiva para candidatos de <strong>'{{ vaga.addressVaga?.city }}'</strong>.
            </p>

            <VBtn color="primary" @click="pageCandidatar(vaga.id)" v-if="!vaga.inscrito" class="w-100"
              style="height: 45px;" :loading="loadingCandidatar" :disabled="vaga.prazo && expireDays == 0">
              <span style="text-transform: none !important;" v-if="!loadingCandidatar">
                {{ curriculo ? !escolaridadeCheck || !areaCheck || !localizacaoCheck ? 'Atualize seu currículo' :
                  'Candidatar-se' : 'Preencha seu currículo' }}
              </span>
              <VIcon v-else icon="tabler-loader" />
              <VIcon
                :icon="curriculo ? !escolaridadeCheck || !areaCheck || !localizacaoCheck ? 'tabler-user-edit' : 'tabler-user-plus' : 'tabler-file-text'"
                class="ml-2" />
            </VBtn>
            <VBtn color="grey" v-if="vaga.inscrito" disabled class="w-100" style="height: 45px;">
              Inscrito
              <VIcon icon="tabler-user-check" class="ml-2" />
            </VBtn>
            <VBtn color="error" @click="removerInscricao(vaga.id)" variant="tonal" class="w-100 mt-4"
              style="height: 45px;" v-if="vaga.inscrito">
              Remover Inscrição
              <VIcon icon="tabler-unlink" class="ml-2" />
            </VBtn>
          </div>

          <div v-if="vaga.prazo && expireDays > 0">
            <p class="mb-1 font-weight-normal text-center mt-3" style="font-size: 13px;">
              <i>A vaga expira em <strong>{{ expireDays }} dias!</strong></i>
            </p>
            <v-progress-linear v-model="expirePercent" :height="10" color="primary" />
          </div>

          <div v-if="vaga.prazo && expireDays == 0">
            <p class="mb-1 font-weight-normal text-center mt-3" style="font-size: 13px;">
              <i>As inscrições para esta vaga foram encerradas!</i>
            </p>
            <v-progress-linear v-model="expirePercent" :height="10" color="error" />
          </div>

        </VCardText>
      </VCard>

    </VCol>

  </VRow>
</template>

<style>
  .descricao-vaga ol {
    margin-left: 20px;
  }
</style>