<template>
  <div class="min-h-screen w-full p-4">
    <!-- <div class="section-title w-full mb-6 pt-3">
      <div class="flex flex-row items-center justify-between mb-4">
        <div class="flex flex-col">
          <div class="text-xs uppercase font-light text-gray-500">Pages</div>
          <div class="text-xl font-bold">User profile</div>
        </div>
      </div>
    </div>
    <div
      class="w-full p-4 mb-4 rounded-lg bg-white border border-gray-100 dark:bg-gray-900 dark:border-gray-800"
    >-->
    <div class="flex flex-row items-center justify-start p-4">
      <div class="py-2 px-2">
        <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
        <p class="text-md text-gray-500 whitespace-nowrap">Musterfirma > PR</p>
      </div>
      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
        <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
            style="display:inline;"
            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"
          >
            <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> Urkunde herunterladen
        </button>
        <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-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
        >Änderungen speichern</button>
      </div>
    </div>
    <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
                class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500"
                type="button"
              >Mein Profil</button>
            </div>
            <div class="flex-none">
              <button class="tab tab-underline py-4 px-6 block" type="button">Meine Rundenzeiten</button>
            </div>
            <div class="flex-none">
              <button class="tab tab-underline py-4 px-6 block" type="button">Meine Spender</button>
            </div>
          </div>
          <div 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">First name</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="first name"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">middle name</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="middle name"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Last name</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="last name"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Email address</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="email address"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">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="phone number"
                      />
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="tab-content hidden">
            <div class="py-4 w-full lg:w-1/2">
              <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">Current email</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="current email address"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">New email</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="new email address"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Daily updates</div>
                      <div class="flex items-center justify-start space-x-2">
                        <label class="flex items-center justify-start space-x-2">
                          <input
                            type="radio"
                            name="daily-updates"
                            class="form-radio h-4 w-4"
                            value="yes"
                          />
                          <span class>Yes</span>
                        </label>
                        <label class="flex items-center justify-start space-x-2">
                          <input
                            type="radio"
                            name="daily-updates"
                            class="form-radio h-4 w-4"
                            value="no"
                          />
                          <span class>No</span>
                        </label>
                      </div>
                    </div>
                    <div class="form-element">
                      <div class="form-label">Weekly updates</div>
                      <div class="flex items-center justify-start space-x-2">
                        <label class="flex items-center justify-start space-x-2">
                          <input
                            type="radio"
                            name="weekle-updates"
                            class="form-radio h-4 w-4"
                            value="yes"
                          />
                          <span class>Yes</span>
                        </label>
                        <label class="flex items-center justify-start space-x-2">
                          <input
                            type="radio"
                            name="weekle-updates"
                            class="form-radio h-4 w-4"
                            value="no"
                          />
                          <span class>No</span>
                        </label>
                      </div>
                    </div>
                  </div>
                  <input
                    type="submit"
                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
                  />
                </form>
              </div>
            </div>
          </div>
          <div class="tab-content hidden">
            <div class="py-4 w-full lg:w-1/2">
              <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">Current password</div>
                      <input
                        name="current-password"
                        type="password"
                        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="Enter your current password"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">New password</div>
                      <input
                        name="new-password"
                        type="password"
                        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="Enter your new password"
                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Confirm new password</div>
                      <input
                        name="confirm-new-password"
                        type="password"
                        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="Enter your new password confirmation"
                      />
                    </div>
                  </div>
                  <input
                    type="submit"
                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
                  />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

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