<template>
  <div class="min-h-screen w-full p-4">
    <section class="text-white body-font">
      <div class="container mx-auto flex items-center md:flex-row flex-col">
        <div
          class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center text-black dark:text-gray-200"
        >
          <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
          <p class="text-md whitespace-nowrap">Musterfirma > PR</p>
        </div>
        <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
          <button
            type="button"
            class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="feather feather-download"
              style="display: inline;height: 1rem;vertical-align: sub;"
            >
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
              <polyline points="7 10 12 15 17 10" />
              <line x1="12" y1="15" x2="12" y2="3" />
            </svg>
            {{ $t('download_certificate') }}
          </button>
          <button
            type="button"
            class="inline-flex focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
          >{{ $t('save_changes') }}</button>
        </div>
      </div>
    </section>
    <div class="flex flex-wrap">
      <div class="w-full p-4">
        <div class="flex flex-wrap flex-col w-full tabs">
          <div class="flex lg:flex-wrap flex-row lg:space-x-2">
            <div class="flex-none">
              <button
                @click="() => { activetab = 'profile' }"
                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
                class="tab tab-underline py-4 px-6 block"
                type="button"
              >{{ $t('profile') }}</button>
            </div>
            <div class="flex-none">
              <button
                @click="() => { activetab = 'laptimes' }"
                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
                class="tab tab-underline py-4 px-6 block"
                type="button"
              >{{ $t('lap_times') }}</button>
            </div>
            <div class="flex-none">
              <button
                @click="() => { activetab = 'sponsorings' }"
                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
                class="tab tab-underline py-4 px-6 block"
                type="button"
              >{{ $t('sponsoring') }}</button>
            </div>
          </div>
          <div v-if="(activetab === 'profile')" class="tab-content block">
            <div class="py-4 w-full">
              <div class="flex flex-col">
                <form class="form flex flex-wrap w-full">
                  <div class="w-full">
                    <div class="form-element">
                      <div class="form-label">{{ $t('vorname') }}</div>
                      <input
                        name="first-name"
                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                        type="text"
                        :placeholder="[[$t('vorname')]]"
                        v-model="state.firstname"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">{{ $t('mittelname') }}</div>
                      <input
                        name="middle-name"
                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                        type="text"
                        :placeholder="[[$t('mittelname')]]"
                        v-model="state.middlename"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">{{ $t('nachname') }}</div>
                      <input
                        name="last-name"
                        type="text"
                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                        :placeholder="[[$t('nachname')]]"
                        v-model="state.lastname"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">{{ $t('e_mail_adress') }}</div>
                      <input
                        name="email"
                        type="email"
                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                        :placeholder="[[$t('e_mail_adress')]]"
                        v-model="state.email"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">{{ $t('phone_number') }}</div>
                      <input
                        name="tel"
                        type="tel"
                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                        :placeholder="[[$t('phone_number')]]"
                        v-model="state.phone"
                      />
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div v-if="(activetab === 'laptimes')" class="tab-content block">
            <div class="py-4 w-full">
              <section class="text-gray-400 dark:bg-gray-900 body-font">
                <div class="container mx-auto">
                  <div class="lg:w-2/3 w-full mx-auto overflow-auto">
                    <table class="table-auto w-full text-left whitespace-no-wrap">
                      <thead
                        class="text-black bg-gray-300 dark:text-white text-sm dark:bg-gray-800"
                      >
                        <tr>
                          <th
                            class="px-4 py-3 title-font tracking-wider font-medium"
                          >{{ $t('distance') }}</th>
                          <th
                            class="px-4 py-3 title-font tracking-wider font-medium"
                          >{{ $t('lap_time') }}</th>
                        </tr>
                      </thead>
                      <tbody class="text-gray-900 dark:text-gray-50">
                        <tr class="border-t-2 border-gray-800">
                          <td class="px-4 py-3">400m</td>
                          <td class="px-4 py-3">0min 57s</td>
                        </tr>
                        <tr class="border-t-2 border-gray-800">
                          <td class="px-4 py-3">400m</td>
                          <td class="px-4 py-3">1min 15s</td>
                        </tr>
                        <tr class="border-t-2 border-gray-800">
                          <td class="px-4 py-3">1km</td>
                          <td class="px-4 py-3">2min 50s</td>
                        </tr>
                        <tr class="border-t-2 border-gray-800">
                          <td class="px-4 py-3">1km</td>
                          <td class="px-4 py-3">3min 00s</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <div v-if="(activetab === 'sponsorings')" class="tab-content block">
            <div class="py-4 w-full">coming soon...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, reactive, watch, defineProps } from "vue";
import { useToast } from "vue-toastification";
import axios from "redaxios";
import isEmail from 'validator/es/lib/isEmail';
import isMobilePhone from 'validator/es/lib/isMobilePhone';
import isPostalCode from 'validator/es/lib/isPostalCode';
// 
const state = reactive({
  phone: "",
  email: "",
  firstname: "",
  middlename: "",
  lastname: "",
})
let activetab = ref("profile");
const toast = useToast();
const token = location.hash.substr(1).split('&')[0].split('=')[1];
axios.get(`${config.baseurl}api/runners/me/${token}`)
  .then(({ data }) => {
    state.phone = data.phone;
    state.email = data.email;
    state.firstname = data.firstname;
    state.middlename = data.middlename;
    state.lastname = data.lastname;
  }).catch((error) => {
    toast.error("An error occured while loading your profile data");
  })
</script>