<template>
  <div class="">
    <div class="card mb-3">
              <div class="card-body">
                <div class="pb-2">
                  <h2 class="card-title text-center pb-0 fs-4"><img :src="logo" alt="로고"></h2>
                </div>

                <form class="row g-3 needs-validation" :class="{ 'was-validated': formSubmitted }" novalidate @submit.prevent="handleLogin">
                  <div class="box">
                    <label for="yourUsername" class="form-label"><img :src="idIcon" alt="아이디 아이콘">아이디</label>
                    <div class="input-group has-validation">
                      <input v-model="id" type="text" name="username" class="form-control" id="yourUsername" placeholder="아이디를 입력하세요." required>
                    </div>
                  </div>

                  <div class="box">
                    <label for="yourPassword" class="form-label"><img :src="passwordIcon" alt="비밀번호 아이콘">비밀번호</label>
                    <input v-model="password" type="password" name="password" class="form-control" id="yourPassword" placeholder="비밀번호를 입력하세요." required>
                  </div>

                  <div class="box">
                    <button class="btn" type="submit"><img :src="loginIcon" alt="로그인 아이콘">로그인</button>
                  </div>
                </form>
              </div>
            </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 임시 로그인 정보
      idIcon: "/client/resources/img/id.png",
      passwordIcon: "/client/resources/img/password.png",
      loginIcon: "/client/resources/img/loginicon.png",
      formSubmitted: false,
      logo: "/client/resources/img/logo.png", // 경로를 Vue 프로젝트 구조에 맞게 설정
      id: "admin", // 임시 아이디
      password: "1234", // 임시 비밀번호
    };
  },
  methods: {
    handleLogin() {
      this.formSubmitted = true;

      // Check if credentials are correct
      if (this.id === "admin" && this.password === "1234") {
        // Set logged in status in localStorage
        localStorage.setItem('isLoggedIn', 'true');

        // Redirect to the main page after successful login
        this.$router.push('/');
      } else {
        // Handle incorrect login attempt
        console.log("아이디 또는 비밀번호가 틀렸습니다.");
      }
    },
  },
};
</script>
