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

        <form @submit.prevent="handleSubmit">
          <div class="mb-6">
            <label
              for="email"
              class="block text-base font-medium text-gray-700 mb-2"
            >
              Email
            </label>
            <input
              type="email"
              id="email"
              v-model="email"
              placeholder="Write Your Email Here"
              class="w-full px-4 py-2 text-[12px] border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
            />
          </div>

          <button
            type="submit"
            class="w-full py-2 bg-red-500 text-white font-semibold rounded-full hover:bg-red-600 transition duration-300"
          >
            Submit
          </button>
        </form>

        <p class="mt-6 text-sm text-[#959595]">
          Already Have An Account?
          <span
            class="text-red-500 font-semibold cursor-pointer"
            v-on:click="toggleLogin()"
            >Login</span
          >
        </p>
      </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">Email Sent</div>

        <p>
          Please check your inbox or spam folder in your email and click the
          link to reset your password.
        </p>
      </div>
    </div>
  </div>

  <!-- Pop Up Login -->
  <div>
    <div
      v-if="showLogin"
      class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
    >
      <div
        class="absolute mx-10 w-full h-full bg-gray-900 opacity-50"
        v-on:click="closeLogin()"
      ></div>
      <div class="relative w-auto my-6 mx-5 max-w-4xl">
        <div
          class="border-0 mx-auto rounded-[30px] shadow-lg relative w-[120vh] bg-white outline-none focus:outline-none"
        >
          <div class="flex">
            <img
              src="/images/banner-login.webp"
              alt="Laptop on Desk"
              class="w-72 rounded-l-[30px]"
            />
            <div class="p-8 w-full">
              <div class="font-bold text-4xl mb-2">Login</div>
              <link
                href="https://fonts.googleapis.com/icon?family=Material+Icons"
                rel="stylesheet"
              />

              <div
                class="flex items-center border border-[#EC1F297D] p-2 rounded-lg max-w-max mt-5"
              >
                <img src="/icon/icon-google.png" class="w-4 h-4 mr-3" />
                <span class="text-sm">Signin with Google</span>
              </div>

              <div class="flex items-center my-5 w-full">
                <hr class="flex-grow border-t border-gray-300" />
                <span class="px-4 text-gray-500 text-[10px]"
                  >Or Use Your Email</span
                >
                <hr class="flex-grow border-t border-gray-300" />
              </div>

              <div class="mb-4">
                <label
                  class="block text-gray-700 text-[12px] font-bold"
                  for="username"
                >
                  Email
                </label>
                <input
                  class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  id="username"
                  type="text"
                  placeholder="Write Your Email Here"
                />
              </div>
              <div class="mb-4">
                <div class="relative">
                  <label
                    class="block text-gray-700 text-[12px] font-bold"
                    for="passwordlogin"
                  >
                    Password
                  </label>
                  <input
                    :type="showPasswordLogin ? 'text' : 'password'"
                    id="passwordlogin"
                    placeholder="Password"
                    class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  />
                  <!-- Eye Icon -->
                  <img
                    :src="
                      showPasswordLogin
                        ? '/icon/icon-eye.svg'
                        : '/icon/icon-eye.svg'
                    "
                    alt="Toggle Password"
                    class="absolute right-4 top-8 transform -translate-y-1/2 cursor-pointer w-3"
                    @click="togglePasswordVisibilityLogin"
                  />
                </div>
                <div class="flex items-center justify-between mt-2">
                  <div class="sb-checkbox">
                    <div class="flex items-center">
                      <div>
                        <input
                          checked
                          type="checkbox"
                          class="sb-checkbox__input"
                          id="check2"
                          name="check2"
                        />
                        <label
                          class="sb-checkbox__label sb-checkbox__label--red"
                          for="check2"
                        ></label>
                      </div>
                      <div class="ms-2 text-[10px] font-medium text-[#959595]">
                        Keep me logged in
                      </div>
                    </div>
                  </div>
                  <div
                    class="text-[10px] text-[#EC1F29]"
                    v-on:click="toggleForgot()"
                  >
                    Forgot Password?
                  </div>
                </div>
              </div>

              <div
                class="rounded-full w-full bg-[#EC1F29] text-white py-2 text-[12px] text-center items-center"
              >
                Login
              </div>

              <div class="pt-10">
                <span class="text-[10px] text-[#959595]"
                  >Dont't Have An Account?</span
                >
                <span
                  class="text-[10px] text-[#EC1F29]"
                  v-on:click="toggleSignUp()"
                >
                  Signup</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showLogin" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
  <!-- Pop Up Login -->

  <!-- Pop Up SignUp -->
  <div>
    <div
      v-if="showSignUp"
      class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
    >
      <div
        class="absolute mx-10 w-full h-full bg-gray-900 opacity-50"
        v-on:click="closeSignUp()"
      ></div>
      <div class="relative w-auto my-6 mx-5 max-w-4xl">
        <div
          class="border-0 mx-auto rounded-[30px] shadow-lg relative w-[120vh] bg-white outline-none focus:outline-none"
        >
          <div class="flex">
            <img
              src="/images/banner-signup.png"
              alt="Laptop on Desk"
              class="w-72 rounded-l-[30px]"
            />
            <div class="p-8 w-full">
              <div class="font-bold text-4xl mb-2">Signup</div>
              <link
                href="https://fonts.googleapis.com/icon?family=Material+Icons"
                rel="stylesheet"
              />

              <div
                class="flex items-center border border-[#EC1F297D] p-2 rounded-lg max-w-max mt-5"
              >
                <img src="/icon/icon-google.png" class="w-4 h-4 mr-3" />
                <span class="text-sm">Signin with Google</span>
              </div>

              <div class="flex items-center my-5 w-full">
                <hr class="flex-grow border-t border-gray-300" />
                <span class="px-4 text-gray-500 text-[10px]"
                  >Or Use Your Email</span
                >
                <hr class="flex-grow border-t border-gray-300" />
              </div>

              <div class="mb-4">
                <label
                  class="block text-gray-700 text-[12px] font-bold"
                  for="username"
                >
                  Email
                </label>
                <input
                  class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  id="username"
                  type="text"
                  placeholder="Write Your Email Here"
                />
              </div>
              <div class="mb-4">
                <div class="relative">
                  <label
                    class="block text-gray-700 text-[12px] font-bold"
                    for="password"
                  >
                    Password
                  </label>
                  <input
                    :type="showPasswordSignUp ? 'text' : 'password'"
                    id="passwordsignup"
                    placeholder="Password"
                    class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  />
                  <!-- Eye Icon -->
                  <img
                    :src="
                      showPasswordSignUp
                        ? '/icon/icon-eye.svg'
                        : '/icon/icon-eye.svg'
                    "
                    alt="Toggle Password"
                    class="absolute right-4 top-8 transform -translate-y-1/2 cursor-pointer w-3"
                    @click="togglePasswordVisibilitySignUp"
                  />
                </div>
                <div class="flex items-center justify-between mt-2">
                  <div class="sb-checkbox">
                    <div class="flex items-center">
                      <div>
                        <input
                          checked
                          type="checkbox"
                          class="sb-checkbox__input"
                          id="check2"
                          name="check2"
                        />
                        <label
                          class="sb-checkbox__label sb-checkbox__label--red"
                          for="check2"
                        ></label>
                      </div>
                      <div class="ms-2 text-[10px] font-medium text-[#959595]">
                        I agree to the Terms of Service and Privacy Policy
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                class="rounded-full w-full bg-[#EC1F29] text-white py-2 text-[12px] text-center items-center"
              >
                Signup
              </div>

              <div class="pt-10">
                <span class="text-[10px] text-[#959595]"
                  >Already Have An Account?</span
                >
                <span
                  class="text-[10px] text-[#EC1F29]"
                  v-on:click="toggleLogin()"
                >
                  Login</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showSignUp" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
  <!-- Pop Up SignUp -->
</template>

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

const router = useRoute();

const showLogin = ref(false);

function toggleLogin() {
  showLogin.value = !showLogin.value;
  showSignUp.value = false;
}
function closeLogin() {
  showLogin.value = false;
}

const showSignUp = ref(false);

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

<script>
export default {
  data() {
    return {
      email: "",
      showPasswordLogin: false,
      showPasswordSignUp: false,
      showSucsess: false,
      showForgot: true,
    };
  },
  methods: {
    togglePasswordVisibilityLogin() {
      this.showPasswordLogin = !this.showPasswordLogin; // Toggle state
    },
    togglePasswordVisibilitySignUp() {
      this.showPasswordSignUp = !this.showPasswordSignUp; // 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>
