sfp_front_nuxt_viver_cafe_landing/app/pages/checkin.vue

<template>
  <div>
    <h2>Check-in do Evento</h2>
    <p>Preencha seus dados para confirmar a presença.</p>

    <form @submit.prevent="handleCheckin">
      <input
        v-model="name"
        type="text"
        placeholder="Nome Completo"
        :disabled="isLoading"
        required
      >
      <input
        v-model="email"
        type="email"
        placeholder="Seu melhor e-mail"
        :disabled="isLoading"
        required
      >
      <input
        v-model="eventCode"
        type="text"
        placeholder="Código do Evento"
        :disabled="isLoading"
        required
      >
      <button 
        type="submit" 
        :disabled="isLoading" 
      >
        {{ isLoading ? 'Confirmando...' : 'Confirmar 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>