<template>
  <div class="min-h-screen flex items-center justify-center">
    <div class="max-w-md w-full py-12 px-6">
      <img class="mx-auto h-24 w-auto" src="/favicon.png" alt />
      <h1
        class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center"
      >Lauf für Kaya! - Registrieren</h1>
      <p
        class="mx-auto leading-relaxed text-base text-center"
      >Jetzt für den Lauf für Kaya! 2021 registrieren.</p>
      <div class="mt-4">
        <label for="first_name" class="block font-medium">
          Vorname
          <span class="font-bold">*</span>
        </label>
        <input
          name="firstname"
          id="first_name"
          autocomplete="off"
          placeholder="Vorname"
          type="text"
          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <label for="middle_name" class="block font-medium">Mittelname</label>
        <input
          name="middlename"
          id="middle_name"
          autocomplete="off"
          placeholder="Mittelname"
          type="text"
          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <label for="last_name" class="block font-medium">
          Nachname
          <span class="font-bold">*</span>
        </label>
        <input
          name="lastname"
          id="last_name"
          autocomplete="off"
          placeholder="Nachname"
          type="text"
          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <label for="email_address" class="block font-medium">
          E-Mail Adresse
          <span class="font-bold">*</span>
        </label>
        <input
          name="email_address"
          id="email_address"
          autocomplete="off"
          placeholder="E-Mail Adresse"
          type="text"
          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <div class="grid grid-cols-6 mt-6">
          <div class="col-span-6"></div>
          <div class="flex items-start col-span-6">
            <div class="flex items-center h-5">
              <input
                v-model="provide_address"
                id="address_activated"
                name="address_activated"
                type="checkbox"
                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
              />
            </div>
            <div class="ml-3 text-sm">
              <label for="address_activated" class="font-medium text-gray-400">Adresse angeben?</label>
            </div>
          </div>
          <div v-if="provide_address===true" class="col-span-6">
            <div class="col-span-6">
              <label for="street" class="block font-medium">Straße</label>
              <input
                type="text"
                name="street"
                placeholder="Straße"
                id="street"
                autocomplete="street-address"
                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
              />
            </div>
            <div class="col-span-6 sm:col-span-6 lg:col-span-2">
              <label for="city" class="block font-medium">Ort</label>
              <input
                type="text"
                name="city"
                placeholder="Ort"
                id="city"
                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
              />
            </div>
            <div class="col-span-6 sm:col-span-3 lg:col-span-2">
              <label for="postal_code" class="block font-medium">PLZ</label>
              <input
                type="text"
                name="postal_code"
                placeholder="PLZ"
                id="postal_code"
                autocomplete="postal-code"
                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
              />
            </div>
          </div>
        </div>
        <div class="flex items-start mt-6">
          <div class="flex items-center h-5">
            <input
              v-model="agb_accepted"
              id="agb_accepted"
              name="agb_accepted"
              type="checkbox"
              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
            />
          </div>
          <div class="ml-3 text-sm">
            <label
              for="agb_accepted"
              class="font-medium text-gray-400 select-none"
            >Ich habe die AGBs gelesen und akzeptiert.</label>
          </div>
        </div>
        <div class="mt-6">
          <button
            @click="login"
            :disabled="(agb_accepted === false)"
            :class="{ 'opacity-50': (agb_accepted === false), 'cursor-not-allowed': (agb_accepted === false) }"
            class="text-white block w-full text-center py-2 px-3 border border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
          >Registrieren</button>
        </div>
      </div>
      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white dark:bg-gray-900">Sie haben bereits einen Account?</span>
          </div>
        </div>
        <div class="mt-6">
          <a
            href="./login"
            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
          >Zum Login</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "redaxios";
import Toastify from "toastify-js";

let provide_address = ref(false);
let agb_accepted = ref(false);
function login() {
  // console.log(agb_accepted.value);
  // alert("AGB was " + (agb_accepted.value === true ? "accepted" : "not accepted"));
}
</script>