<script>
import { $api } from "@/utils/api";
import { useRouter } from "vue-router";

export default {
  data() {
    return {
      userData: useCookie("userData").value,
      router: useRouter(),
      form: {
        logo: "",
        empresa: "",
        emailEmpresa: "",
        telefoneEmpresa: "",
        estado: "",
        cidade: "",
        descricao: "",
        funcao: "",
        tipoVaga: "",
        salario: "",
        formaContrato: "",
      },
    };
  },
  methods: {
    submitForm() {
      if (this.form.salario === "") {
        this.form.salario = "A Combinar";
      }
      try {
        $api(`/vagas/registrarVaga/${this.userData.id}`, {
          method: "POST",
          body: this.form,
        }).then(() => {
          this.router.push("/vagas");
        });
      } catch (error) {
        console.error("Erro ao cadastrar vaga:", error);
      }
      console.log(this.form);
    },
  },
};
</script>

<template>
  <h1>Cadastro de Vagas</h1>
  <form class="form" @submit.prevent="submitForm()">
    <div class="form__esquerda">
      <v-file-input label="Logo da Empresa" :counter="10"> </v-file-input>
      <v-text-field
        :counter="30"
        label="Nome da Empresa"
        v-model="form.empresa"
      ></v-text-field>
      <v-text-field
        :counter="10"
        label="Email da Empresa"
        v-model="form.emailEmpresa"
      ></v-text-field>
      <v-text-field
        :counter="10"
        label="Telefone da Empresa"
        v-model="form.telefoneEmpresa"
      ></v-text-field>
      <v-text-field
        :counter="10"
        label="Estado"
        v-model="form.estado"
      ></v-text-field>
      <v-text-field
        :counter="10"
        label="Cidade"
        v-model="form.cidade"
      ></v-text-field>

      <v-select
        label="Modelo de Contratação"
        :counter="10"
        :items="['CLT', 'PJ']"
        v-model="form.tipoVaga"
      ></v-select>

      <v-select
        label="Período de Trabalho"
        :counter="10"
        :items="['Híbrido', 'Presencial', 'Remoto']"
        v-model="form.formaContrato"
      ></v-select>
    </div>
    <div class="form__direita">
      <v-text-field
        :counter="10"
        label="Cargo"
        v-model="form.funcao"
      ></v-text-field>
      <v-text-field
        :counter="10"
        label="Valor do Salário ou deixe em branco se quiser 'A Combinar'"
        v-model="form.salario"
      ></v-text-field>

      <v-textarea
        label="Descrição"
        :counter="1500"
        rows="6"
        v-model="form.descricao"
      ></v-textarea>

      <v-btn class="me-4" type="submit"> Cadastrar </v-btn>
    </div>
  </form>
</template>

<style lang="scss">
.form {
  display: flex;
  margin-top: 20px;

  @media (max-width: 768px) {
    flex-direction: column;
  }

  .form__esquerda {
    width: 50%;
    padding-right: 20px;
    @media (max-width: 768px) {
      width: 100%;
      padding-right: 0;
    }

    .input-file {
      margin-bottom: 20px;
    }
  }

  .form__direita {
    width: 50%;

    @media (max-width: 768px) {
      width: 100%;
    }

    .me-4 {
      margin-top: 14px;
    }
  }
}
</style>
