sfp_front_nuxt_viver_cafe_landing/app/pages/checkin.vue

<template>
  <div class="flex flex-col justify-center items-center mt-10">
    <div class="bg-primary rounded-full w-31 h-31 flex justify-center items-center">
      <NuxtImg src="/img/coffee.svg" />
    </div>
    <h1 class="text-2xl mt-3">Registre sua participação</h1>
    <p class="text-sm text-[#505050] mt-4">Digite o Código do Evento/live que recebeu para registrar sua presença</p>
    <form class="flex flex-col justify-center items-center mt-5 gap-2 w-[361px]" @submit.prevent="handleCheckin">
      <div class="flex flex-col justify-center items-center w-full">
        <label for="name" class="text-text-2 mb-1 font-medium text-sm">Nome Cadastrado na plataforma <span class="text-error">*</span></label>
        <input
          v-model="name"
          type="text"
          placeholder="João da Silva"
          :disabled="isLoading"
          required
          class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
        >
      </div>
      <div class="flex flex-col justify-center items-center w-full">
        <label for="email" class="text-text-2 mb-1 font-medium text-sm">Email <span class="text-error">*</span></label>
        <input
          v-model="email"
          type="email"
          placeholder="email@email.com"
          :disabled="isLoading"
          required
          class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
        >
      </div>
      <div class="flex flex-col justify-center items-center w-full">
        <label for="eventCode" class="text-text-2 mb-1 font-medium text-sm">Código do Evento/live <span class="text-error">*</span></label>
        <input
          v-model="eventCode"
          type="text"
          placeholder="Ex. Cafe123"
          :disabled="isLoading"
          required
          class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
        >
      </div>
      <button 
        type="submit" 
        :disabled="isLoading" 
        class="bg-primary text-white rounded-lg uppercase w-full h-[50px] mt-5"
      >
        {{ isLoading ? 'Registrando...' : 'Registrar Presença' }}
      </button>
    </form>
    
    <p v-if="statusMessage">{{ statusMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

definePageMeta({
  layout: 'checkin',
});

const name = ref('');
const email = ref('');
const eventCode = ref('');
const statusMessage = ref('');
const isLoading = ref(false);

async function handleCheckin() {
  if (!name.value || !email.value || !eventCode.value) {
    statusMessage.value = 'Por favor, preencha todos os campos.';
    return;
  }

  isLoading.value = true;
  statusMessage.value = '';

  try {
    const { data, error } = await useFetch('/api/perform-checkin', {
      method: 'POST',
      body: { 
        name: name.value,
        email: email.value, 
        eventCode: eventCode.value 
      },
    });

    if (error.value) {
      throw error.value;
    }

    statusMessage.value = `Check-in realizado com sucesso, ${data.value.name}!`;
    name.value = '';
    email.value = '';
    eventCode.value = '';
  } catch (err) {
    statusMessage.value = 'Erro ao realizar o check-in. Verifique os dados e tente novamente.';
    console.error(err);
  } finally {
    isLoading.value = false;
  }
}
</script>