<template>
  <div class="flex items-center justify-center bg-gray-100 h-[90vh] py-40">
    <div
      v-if="showForgot"
      class="relative bg-white rounded-[30px] shadow-lg px-8 pt-10 pb-20 w-full max-w-sm overflow-hidden"
    >
      <div class="pb-12">
        <div class="text-3xl font-bold text-gray-800 mb-6 text-center">
          Reset Password
        </div>

        <form @submit.prevent="handleSubmit">
          <div class="mb-6">
            <div class="mb-4">
              <div class="relative">
                <label
                  class="block text-gray-700 text-sm mb-1 font-bold"
                  for="password"
                >
                  New Password
                </label>
                <input
                  :type="showPasswordNew ? 'text' : 'password'"
                  id="passwordsignup"
                  placeholder="**********"
                  class="appearance-none border text-[12px] rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                />
                <!-- Eye Icon -->
                <img
                  :src="
                    showPasswordNew
                      ? '/icon/icon-eye.svg'
                      : '/icon/icon-eye.svg'
                  "
                  alt="Toggle Password"
                  class="absolute right-4 top-7 transform -translate-y-1/2 cursor-pointer w-4 mt-3"
                  @click="togglePasswordVisibilityNew"
                />
              </div>
            </div>
            <div class="">
              <div class="relative">
                <label
                  class="block text-gray-700 text-sm mb-1 font-bold"
                  for="password"
                >
                  Confrim Password
                </label>
                <input
                  :type="showPasswordConfrim ? 'text' : 'password'"
                  id="passwordsignup"
                  placeholder="**********"
                  class="appearance-none border text-[12px] rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                />
                <!-- Eye Icon -->
                <img
                  :src="
                    showPasswordConfrim
                      ? '/icon/icon-eye.svg'
                      : '/icon/icon-eye.svg'
                  "
                  alt="Toggle Password"
                  class="absolute right-4 top-7 transform -translate-y-1/2 cursor-pointer w-4 mt-3"
                  @click="togglePasswordVisibilityConfrim"
                />
              </div>
            </div>
          </div>

          <button
            type="submit"
            class="w-full text-sm py-2 bg-red-500 text-white font-semibold rounded-full hover:bg-red-600 transition duration-300"
          >
            Submit
          </button>
        </form>
      </div>
      <div class="absolute bottom-0 right-0 z-0">
        <img
          src="/icon/aksen.svg"
          class="rounded-br-[30px]"
          alt="Aksen Design"
        />
      </div>
    </div>
    <div
      v-if="showSucsess"
      class="relative px-8 pt-16 pb-20 w-full max-w-sm overflow-hidden text-center"
    >
      <div>
        <div class="text-3xl font-bold text-black mb-6">Password Updated</div>

        <p>
          Password has been successfully updated. Please log in using the new
          password.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

function toggleForgot() {
  showSignUp.value = false;
  showLogin.value = false;
}
</script>

<script>
export default {
  data() {
    return {
      email: "",
      showPasswordNew: false,
      showPasswordConfrim: false,
      showSucsess: false,
      showForgot: true,
    };
  },
  methods: {
    togglePasswordVisibilityNew() {
      this.showPasswordNew = !this.showPasswordNew; // Toggle state
    },
    togglePasswordVisibilityConfrim() {
      this.showPasswordConfrim = !this.showPasswordConfrim; // Toggle state
    },
    handleSubmit() {
      this.showSucsess = true;
      this.showForgot = false;

      // Hide the success message after 3 seconds
      setTimeout(() => {
        this.showSucsess = false;
        this.showForgot = true;
      }, 3000);
    },
  },
};
</script>

<style>
.sb-checkbox {
  display: inline-block;
  font-size: 0;
}

.sb-checkbox__input {
  display: none;
}

.sb-checkbox__input:checked + .sb-checkbox__label:after {
  opacity: 1;
}

.sb-checkbox__label {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  cursor: pointer;
}

.sb-checkbox__label:before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid;
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
}

.sb-checkbox__label:after {
  content: "done";
  font-family: "Material Icons";
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
  opacity: 0;
  transition: 0.2s opacity;
}

.sb-checkbox__label--red:before {
  border-color: #ef5350;
}

.sb-checkbox__label--red:after {
  background-color: #ef5350;
  color: #fff;
}
</style>
