<script setup>
import {ref, reactive,computed, onMounted} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const route = useRouter();
let LeftSidebar = computed(() => store.state.leftSidebar)
let sidebar = computed(()=>store.state.sidebar)
let setting = computed(()=>store.state.setting)
let loginLoader = ref(false)

let form = reactive({
    'oldPassword':'',
    'newPassword':'',
    'confirmPassword':'',
    'AuthTokenId':localStorage.getItem('authToken').split('|')[0],
})
let user = computed(()=>store.state.user)
let session = localStorage.getItem('defaultToken')
const normal = async()=>{
    if(user.value.verify !== 1){
        route.push('/verify-phone/'+user.value.phone+'/'+session)
    }
}
onMounted(async () =>{
   window.scrollTo(0, 0);
    store.dispatch('mobileMenuHideShow', false) 
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    normal()
})
const back = async()=>{
    // route.go(-1)
}
let passwordMsg = ref()
const changePassword = async()=>{
    loginLoader.value = true
    if(form.newPassword == form.confirmPassword && loginLoader.value == false){
        store.dispatch("Loader",true)
        axios.post('/api/user-change-password', form).then(response =>{
            loginLoader.value = false
            if(response.data.success == true){
                route.push('/')
            }else{
                passwordMsg.value = response.data.msg
            }
            store.dispatch("Loader",false)
        })
    }else{
        passwordMsg.value = 'Password not matched.'
    }
}
</script>
<template>
    <main class="main">
        <div class="login-page">
            <div class="container-fluid" :style="[LeftSidebar == true ? 'padding-left: 235px' : 'padding-left: 15px', sidebar == true ? 'padding-right: 355px' : 'padding-right: 75px']">
                <div class="form-box">
                    <div class="change-password-loader" v-if="loginLoader">
                        <div class="loader">
                            <div class="step gb">
                                <div class="waiting-bar"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-tab">
                        <ul class="nav nav-pills nav-fill" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active">Change Password</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="signin-2" role="tabpanel" aria-labelledby="signin-tab-2">
                                <form @submit.prevent="changePassword">
                                    <div class="form-group">
                                        <label for="currentPassword">Current Password</label>
                                        <input type="password" id="currentPassword" v-model="form.oldPassword" class="form-control" placeholder="Current Password" required>
                                    </div><!-- End .form-group -->
                                    <div class="form-group">
                                        <label for="newPassword">New Password</label>
                                        <input type="password" id="newPassword" v-model="form.newPassword" class="form-control" placeholder="New Password" required>
                                    </div><!-- End .form-group -->
                                    <div class="form-group">
                                        <label for="confirmPassword">Confirm Password</label>
                                        <input type="password" id="confirmPassword" v-model="form.confirmPassword" class="form-control mt-1" placeholder="Confirm Password" required>
                                    </div><!-- End .form-group -->
                                    <p class="change-phone password-check">{{passwordMsg}}</p>
                                    <div class="form-footer">
                                        <button type="submit" class="btn btn-outline-primary-2">
                                            <span>Update</span>
                                        </button>
                                    </div><!-- End .form-footer -->
                                </form>
                            </div><!-- .End .tab-pane -->
                        </div><!-- End .tab-content -->
                    </div><!-- End .form-tab -->
                </div><!-- End .form-box -->
            </div><!-- End .container -->
        </div><!-- End .login-page section-bg -->
    </main><!-- End .main -->
</template>
<style scoped>
.change-password-loader{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
}
.change-password-loader .loader{
  width:auto;
  height:10px;
  margin:0 20px 20px 20px;
  display:flex;
  justify-content:space-between;
}
.change-password-loader .step{
  width:100%;
  height:10px;
  border-radius:5px;
}
.change-password-loader .step .gb{
  background:#28aae2;
  margin-right:10px;
}
.change-password-loader .waiting-bar{
  width:20%;
  height:10px;
  border-radius:5px;
  background:#28aae2;
  animation: waiting 2s ease-in-out 0s infinite alternate;
}
@keyframes waiting{
  100%{transform:translateX(400%);}
}
label{
    margin: 0;
}
.change-phone.password-check{
    color: red;
}
.change-phone{
    color: #39f;
    margin-top: -10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.container-fluid{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 60px);
    width: 100%;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.form-control{
    font-size: 1.8rem;
    color: #000;
}
.form-box{
    min-width: 570px;
    position: relative;
}
.btn-outline-primary-2 {
    color: #28aae2;
    background-color: transparent;
    background-image: none;
    border-color: #28aae2;
    box-shadow: none
}
.nav.nav-pills .nav-item .nav-link.active {
    color: #28aae2;
    border-color: #d7d7d7;
    border-bottom-color: #28aae2;
}
.btn-outline-primary-2:hover,
.btn-outline-primary-2:focus,
.btn-outline-primary-2.focus,
.btn-outline-primary-2:not(:disabled):not(.disabled):active,
.btn-outline-primary-2:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary-2.dropdown-toggle {
    color: #fff;
    background-color: #28aae2;
    border-color: #28aae2;
    box-shadow: none
}
.form-tab .form-footer a:hover,
.form-tab .form-footer a:focus {
    color: #28aae2;
}
.login-page{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}
@media screen and (max-width: 768px) {
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100vh - 100px);
    }
    .form-box{
        min-width: 0;
        /* max-width: 570px; */
        padding: 2rem
    }
}
</style>