<script>
import { useStore } from "vuex";
import ApiServiece from "@/services/ApiService";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Swal from "sweetalert2";
export default {
  name: "RESET-PASSWORD",
  components: {},
  setup() {
    const logo = ref();
    const settings = ref()
    const router = useRouter();
    const loading = ref(false);
    const errors = ref({});
    const store = useStore();
    const newPassword = ref("");
    const confirmPassword = ref("");

    const resetPassword = async () => {
      if (!validateForm()) return;
      loading.value = true;
      try {
        await store.dispatch("user/resetPassword", {
          newPassword: newPassword.value,
          confirmPassword: confirmPassword.value,
        });
        router.push({ name: "login-v2" });
        loading.value = false;
      } catch (error) {
        console.error(error);
        loading.value = false;
        Swal.fire({
          icon: "error",
          text: `${error.message}`,
          confirmButtonText: "باشه",
        });
      }
    };

    const validateForm = () => {
      errors.value = {};

      if (!newPassword.value) {
        errors.value.newPassword = "رمز عبور جدید را وارد نمایید";
      } else if (newPassword.value.length < 8) {
        errors.value.newPassword = "رمز عبور باید حداقل ۸ کاراکتر باشد";
      }

      if (!confirmPassword.value) {
        errors.value.confirmPassword = "رمز عبور را تکرار کنید";
      } else if (confirmPassword.value !== newPassword.value) {
        errors.value.confirmPassword = "رمز عبور و تکرار آن باید یکسان باشند";
      }

      return Object.keys(errors.value).length === 0;
    };

    const clearError = (field) => {
      errors.value[field] = "";
    };

    const getSettings = async () => {
      logo.value = localStorage.getItem("logo");
      try {
        const response = await ApiServiece.get("settings/logo_fav");
        settings.value = response.data.data;
      } catch (error) {
        console.error("Error fetching settings:", error);
      }
    };

    onMounted(() => {
      getSettings();
    });

    return {
      newPassword,
      confirmPassword,
      resetPassword,
      clearError,
      errors,
      loading,
      logo,
    };
  },
};
</script>

<template>
  <div class="auth-main v2">
    <div class="bg-overlay bg-dark"></div>
    <div class="auth-wrapper">
      <div class="auth-form">
        <div class="card my-5 mx-3">
          <div style="direction: rtl" class="card-body">
            <div class="text-center mb-4">
              <img :src="logo" alt="Logo" class="styled-logo" />
            </div>
            <h4 class="f-w-500 mb-1">بازنشانی رمز عبور</h4>
            <p class="mb-3">
              باز گشت به صفحه
              <router-link to="/login-v2" class="link-primary"
                >ورود</router-link
              >
            </p>
            <div class="mb-3">
              <label class="form-label">رمز عبور جدید</label>
              <input
                @input="clearError('newPassword')"
                type="password"
                class="form-control"
                v-model="newPassword"
                placeholder="رمز عبور جدید"
              />
              <small v-if="errors.newPassword" class="text-danger">{{
                errors.newPassword
              }}</small>
            </div>
            <div class="mb-3">
              <label class="form-label">تکرار رمز عبور</label>
              <input
                @input="clearError('confirmPassword')"
                type="password"
                class="form-control"
                v-model="confirmPassword"
                placeholder="تکرار رمز عبور"
              />
              <small v-if="errors.confirmPassword" class="text-danger">{{
                errors.confirmPassword
              }}</small>
            </div>
            <div class="d-grid mt-4">
              <button
                @click="resetPassword"
                type="button"
                class="btn btn-primary"
                :disabled="loading"
              >
                <span
                  v-if="loading"
                  class="spinner-border spinner-border-sm"
                  role="status"
                  aria-hidden="true"
                ></span>
                <span v-else> بازنشانی </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Rightbar />
</template>

<style scoped>
.styled-logo {
  display: block;
  max-width: 120px; /* Adjust the logo size here */
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  margin: 0 auto 30px;
  margin-bottom: 90px;
}

.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-body {
  padding: 40px;
}

h4 {
  font-size: 1.5rem;
  font-weight: 500;
}

.text-center {
  text-align: center;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.form-control {
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 0.8rem 1rem;
}
</style>
