<template>
  <div class="px-10 items-center justify-center mb-32">
    <div>
      <div class="grid lg:grid-cols-2 grid-cols-1 md:grid-cols-2 gap-10 mb-6">
        <div>
          <div class="text-[#273A97] text-2xl font-bold py-3">Edit Profile</div>
          <div>
            <div class="mb-4">
              <label
                class="block text-gray-700 text-base font-bold"
                for="username"
              >
                Name
              </label>
              <input
                class="appearance-none text-sm 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 Name Here"
              />
            </div>
            <div class="mb-4">
              <label
                class="block text-gray-700 text-base font-bold"
                for="username"
              >
                Email
              </label>
              <input
                class="appearance-none text-sm 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">
              <label
                class="block text-gray-700 text-base font-bold"
                for="username"
              >
                Phone Number
              </label>
              <input
                class="appearance-none text-sm 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 Phone Number Here"
              />
            </div>
            <div class="mb-4">
              <label
                class="block text-gray-700 text-base font-bold"
                for="username"
              >
                Birthday
              </label>
              <input
                class="appearance-none text-sm border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="username"
                type="date"
                placeholder="Write Your Birthday Here"
              />
            </div>
            <div class="mb-4">
              <label
                class="block text-gray-700 text-base font-bold"
                for="username"
              >
                Address
              </label>
              <textarea
                class="appearance-none text-sm border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="username"
                placeholder="Write Your Birthday Here"
                rows="4"
              ></textarea>
            </div>
            <div
              class="rounded-full max-w-max px-10 bg-[#EC1F29] text-white py-2 text-[12px] text-center items-center"
            >
              Update
            </div>
          </div>
        </div>
        <div>
          <div class="text-[#273A97] text-2xl font-bold py-3">
            Change Password
          </div>
          <div>
            <div class="mb-4">
              <div class="relative">
                <label
                  class="block text-gray-700 text-base font-bold"
                  for="passwordlogin"
                >
                  Current Password
                </label>
                <input
                  :type="showPasswordLogin ? 'text' : 'password'"
                  id="passwordlogin"
                  placeholder="Password"
                  class="appearance-none text-sm 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-10 transform -translate-y-1/2 cursor-pointer w-4"
                  @click="togglePasswordVisibilityLogin"
                />
              </div>
            </div>
            <div class="mb-4">
              <div class="relative">
                <label
                  class="block text-gray-700 text-base font-bold"
                  for="passwordlogin"
                >
                  New Password
                </label>
                <input
                  :type="showPasswordLogin ? 'text' : 'password'"
                  id="passwordlogin"
                  placeholder="Password"
                  class="appearance-none text-sm 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-10 transform -translate-y-1/2 cursor-pointer w-4"
                  @click="togglePasswordVisibilityLogin"
                />
              </div>
            </div>
            <div class="mb-4">
              <div class="relative">
                <label
                  class="block text-gray-700 text-base font-bold"
                  for="passwordlogin"
                >
                  Confirm Password
                </label>
                <input
                  :type="showPasswordLogin ? 'text' : 'password'"
                  id="passwordlogin"
                  placeholder="Password"
                  class="appearance-none text-sm 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-10 transform -translate-y-1/2 cursor-pointer w-4"
                  @click="togglePasswordVisibilityLogin"
                />
              </div>
            </div>
          </div>
          <div
            class="rounded-full max-w-max px-10 bg-[#EC1F29] text-white py-2 text-[12px] text-center items-center"
          >
            Update
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      showPasswordLogin: false,
      showPasswordSignUp: false,
    };
  },
  methods: {
    togglePasswordVisibilityLogin() {
      this.showPasswordLogin = !this.showPasswordLogin; // Toggle state
    },
    togglePasswordVisibilitySignUp() {
      this.showPasswordSignUp = !this.showPasswordSignUp; // Toggle state
    },
    handleSubmit() {
      if (!this.email) {
        alert("Please enter your email.");
        return;
      }
      alert(`Email submitted: ${this.email}`);
      // Add further handling for form submission here.
    },
  },
};
</script>
