<script setup lang="ts">
import { reactive, ref } from "vue";
import { apiPost } from "../api";
import FormStatus from "../components/FormStatus.vue";
import PageHeader from "../components/PageHeader.vue";

const form = reactive({
  organization_name: "",
  email: "",
  accept_terms: false
});
const pending = ref(false);
const status = ref("");
const statusKind = ref<"info" | "success" | "error">("info");

async function submit() {
  pending.value = true;
  status.value = "Sende Anfrage...";
  statusKind.value = "info";

  const result = await apiPost("/api/v1/registration/organization", form);
  pending.value = false;
  status.value = result.ok
    ? "Registrierung eingegangen. Nach Freischaltung erhalten Sie eine E-Mail."
    : result.message;
  statusKind.value = result.ok ? "success" : "error";
}
</script>

<template>
  <PageHeader title="Firma registrieren" description="Neue Organization für den SaaS-Betrieb vormerken." />
  <section class="panel form-panel">
    <form @submit.prevent="submit">
      <label class="field">
        <span>Firmenname</span>
        <input v-model="form.organization_name" name="organization_name" type="text" placeholder="Muster GmbH" required />
      </label>
      <label class="field">
        <span>E-Mail-Adresse</span>
        <input v-model="form.email" name="email" type="email" placeholder="admin@example.com" required />
      </label>
      <label class="check-row">
        <input v-model="form.accept_terms" name="accept_terms" type="checkbox" required />
        <span>Nutzungsbedingungen akzeptieren</span>
      </label>
      <div class="form-actions">
        <button type="submit" :disabled="pending">Registrierung absenden</button>
      </div>
      <FormStatus :message="status" :kind="statusKind" />
    </form>
  </section>
</template>
