<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.settings)
let loginLoader = ref(false)
let form = reactive({
    'phone_no':'',
    'otpPin1':'',
    'otpPin2':'',
    'otpPin3':'',
    'otpPin4':'',
    'otpPin5':'',
    'newPassword':'',
    'confirmPassword':'',
})
let user = ref([])
let Otp = ref([])
let timeDuration = ref([])
let OTPCOdesec = ref(false)
let incorrectphnmsg = ref()
const forgotPassword = async()=>{
    loginLoader.value = true
    axios.post('/api/forgot-password/'+form.phone_no).then(response =>{
        loginLoader.value = false
        if(response.data.success == true){
            OTPCOdesec.value = true
            user.value = response.data.user
            Otp.value = response.data.otp
            // toastr.success(response.data.message, {timeOut: 3000},{progressBar:true})
            // OTp Messagint time countdown
            timeDuration.value = 120
            var id = setInterval(forgotpass, 1000)

            function forgotpass(){
                if(timeDuration.value > 0){
                    timeDuration.value = timeDuration.value - 1
                }else{
                    clearInterval(id)
                }
            }
        }else{
            incorrectphnmsg.value = 'Incorrect Phone'
        }
    })
}

onMounted(async () =>{
   window.scrollTo(0, 0);
   store.dispatch('mobileMenuHideShow', false)  
    store.dispatch("SearchText", null)
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    store.dispatch('CartCompare','-74px')
    store.dispatch('HeaderFooterOff',false)
})
const back = async()=>{
    // route.go(-1)
}
const ResetPin = async(phone)=>{
    if(timeDuration.value < 1){
        forgotPassword()
    }
}
const ChangePhone = async()=>{
    timeDuration.value = setting.value.login_req_message_time
    OTPCOdesec.value = false
    clearInterval(id)
}
const LoginPageBack= async()=>{
    route.push('/login')
}
let otperrormsg = ref()
let newpasswordsec = ref(false)
const confirmPinCode = async()=>{
    let allOtp = parseInt(form.otpPin1+form.otpPin2+form.otpPin3+form.otpPin4+form.otpPin5)
    if(timeDuration.value > 0){
        if(allOtp == Otp.value){
            newpasswordsec.value = true
        }else{
            otperrormsg.value = 'Error Code.'
        }
    }else{
        otperrormsg.value = 'Time out.'
    }
}
let passwordMsg = ref()
const changePassword = async()=>{
    if(form.newPassword == form.confirmPassword){
        loginLoader.value = true
        axios.post('/api/change-password/'+user.value.phone, form).then(response =>{
            loginLoader.value = false
            route.push('/login')
        })
    }else{
        passwordMsg.value = 'Password not matched.'
    }
}
const moveNext = async(currentInput,nextInput)=>{
    if(currentInput == 'otpPin1'){
        if(form.otpPin1.length == 1 ){
            document.getElementById(nextInput).focus();
        }
    }
    if(currentInput == 'otpPin2'){
        if(form.otpPin2.length == 1 ){
            document.getElementById(nextInput).focus();
        }
    }
    if(currentInput == 'otpPin3'){
        if(form.otpPin3.length == 1 ){
            document.getElementById(nextInput).focus();
        }
    }
    if(currentInput == 'otpPin4'){
        if(form.otpPin4.length == 1 ){
            document.getElementById(nextInput).focus();
        }
    }
}
const HomePageBack= async()=>{
    route.push('/')
}
</script>
<template>
    <main class="main">
        <div class="container-fluid">
            <div  style="justify-content: center;align-items: center;height:100vh;display:flex;">
                <div class="login-section" style="width:50%">
                    <div class="form-box">
                        <div class="login-loader" v-if="loginLoader">
                            <div class="loader">
                                <div class="step gb">
                                    <div class="waiting-bar"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-tab">
                            <div class="log-header">
                                <div class="logo-login d-flex">
                                    <img @click="HomePageBack" class="mb-4" :src="'https://wbbd.wholesalebagbd.com/full%20_logo.png'" style="width:210px;cursor:pointer">
                                </div>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="signin-2" role="tabpanel" aria-labelledby="signin-tab-2">
                                    <form @submit.prevent="forgotPassword" v-if="!OTPCOdesec">
                                    <div class="h2" style="font-size:30px">Forgot Password?</div>
                                    <p style="font-size:16px" class="mb-2">No worries, We will send you Instructions</p>
                                    <div class="form-group">
                                        <label for="phoneNumber" style="margin:0 0 0;font-size:14px;color:#1a1a1a;font-weight:400">Phone Number</label>
                                        <div class="input-svg" style="position:relative">
                                            <span style="position:absolute;left:5px;top:50%;transform:translateY(-55%)">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#B0B0B0" viewBox="0 0 24 24">
                                                    <path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.21 11.72 11.72 0 003.64.58 1 1 0 011 1v3.48a1 1 0 01-1 1A17 17 0 013 5a1 1 0 011-1h3.49a1 1 0 011 1 11.72 11.72 0 00.57 3.64 1 1 0 01-.25 1.08z"/>
                                                </svg>
                                            </span>
                                            <input type="tel" style="font-size:12px;color:#B0B0B0;padding-left:30px;padding-top:25px; padding-bottom:25px;" placeholder="Phone Number" maxlength="11" id="phoneNumber" v-model="form.phone_no" class="form-control" required>
                                        </div>
                                    </div><!-- End .form-group -->
                                    <span style="color:red" v-if="incorrectphnmsg">{{incorrectphnmsg}}</span>
                                    <div class="form-footer-submit mt-2">
                                            <input type="submit" value="Reset Password">
                                        </div><!-- End .form-footer -->
                                </form>
                                <form @submit.prevent="confirmPinCode" v-if="OTPCOdesec && !newpasswordsec">
                                    <div class="form-group">
                                        <div class="success-msg d-flex justify-content-center"><img :src="'/success.png'" style="width:28px;height:28px"></div>
                                        <div class="pin-code-sent text-center" style="font-size:24px; font-weight:500">Pin Code Sent</div>
                                        <span for="otpPin" class="text-center" style="color:#6d6d6d;font-size:16px">We've sent you a pin code to <strong>+880{{ user.phone }}</strong>. Please check and follow the instructions to reset your password</span>
                                        <div class="enter-code mt-2" style="color:#1A1A1A;font-size:16px">Enter the Code</div>
                                        <div class="input-code d-flex justify-content-center">
                                            <input type="tel" @input="moveNext('otpPin1','input2')" id="input1" maxlength="1" style="width:45px; padding:15px;text-align:center;margin-right:10px;" v-model="form.otpPin1" class="form-control" required>
                                            <input type="tel" @input="moveNext('otpPin2','input3')" id="input2" maxlength="1" style="width:45px; padding:15px;text-align:center;margin-right:10px;" v-model="form.otpPin2" class="form-control" required>
                                            <input type="tel" @input="moveNext('otpPin3','input4')" id="input3" maxlength="1" style="width:45px; padding:15px;text-align:center;margin-right:10px;" v-model="form.otpPin3" class="form-control" required>
                                            <input type="tel" @input="moveNext('otpPin4','input5')" id="input4" maxlength="1" style="width:45px; padding:15px;text-align:center;margin-right:10px;" v-model="form.otpPin4" class="form-control" required>
                                            <input type="tel" maxlength="1" id="input5" style="width:45px; padding:15px;text-align:center" v-model="form.otpPin5" class="form-control" required>
                                        </div>
                                        <div class="form-footer-submit mt-2">
                                            <input type="submit" value="Next">
                                        </div><!-- End .form-footer -->
                                        <div class="error-msg text-center">
                                            <span style="color:red" v-if="otperrormsg">{{otperrormsg}}</span>
                                        </div>
                                        
                                    </div><!-- End .form-group -->
                                    <div class="resend-code d-flex text-center justify-content-center">
                                        <!-- <span @click="ResetPin(user.phone)" type="submit" class="btn btn-outline-primary-2" :class="{otpmsg:timeDuration !== 0}">
                                            <span>Request Pin Again <span v-show="timeDuration > 0">{{ timeDuration }} Seconds</span></span>
                                        </span> -->
                                        <div class="time-out" v-show="timeDuration > 0"><span>Request Pin Again <span v-show="timeDuration > 0">{{ timeDuration }} Seconds</span></span></div>
                                        <div class="text-center" v-show="timeDuration == 0" style="color:#6d6d6d;font-size:16px">Didn't received the Code? <span class="resend-code-span" @click="ResetPin(user.phone)">Resend Code</span></div>
                                    </div>
                                    <div class="resend-code d-flex text-center justify-content-center mt-2">
                                        <div class="text-center" style="color:#6d6d6d;font-size:16px" @click="ChangePhone">Wrong Phone Number? <span class="resend-code-span">Change Phone No</span></div>
                                    </div>
                                </form>
                                <form @submit.prevent="changePassword" v-if="newpasswordsec">
                                    <div class="h2" style="font-size:30px">Create new password</div>
                                    <p style="font-size:16px" class="mb-2">Your new password must be different from pervious used password</p>
                                    <div class="form-group">
                                        <label for="newPassword" style="margin:0 0 0;font-size:14px;color:#1a1a1a;font-weight:400">New Password</label>
                                        <div class="input-svg" style="position:relative">
                                            <span style="position:absolute;left:5px;top:50%;transform:translateY(-55%)">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 24 27" fill="none" stroke="#ffffff" stroke-width="1.5">
                                                    <path d="M6 11V7a6 6 0 0112 0v4" stroke="#b0b0b0" fill="none"/>
                                                    <rect x="4" y="11" width="16" height="12" rx="2" stroke="#b0b0b0" fill="none"/>
                                                    <circle cx="12" cy="17" r="3" fill="#b0b0b0"/>
                                                </svg>
                                            </span>
                                            <input type="password" id="newPassword" style="font-size:12px;color:#B0B0B0;padding-left:30px;padding-top:25px; padding-bottom:25px;" v-model="form.newPassword" class="form-control mt-1" placeholder="***********" required>
                                        </div>
                                    </div><!-- End .form-group -->
                                    <div class="form-group" >
                                        <label for="newPassword" style="margin:0 0 0;font-size:14px;color:#1a1a1a;font-weight:400">Confirm Password</label>
                                        <div class="input-svg" style="position:relative">
                                            <span style="position:absolute;left:5px;top:50%;transform:translateY(-55%)">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 24 27" fill="none" stroke="#ffffff" stroke-width="1.5">
                                                    <path d="M6 11V7a6 6 0 0112 0v4" stroke="#b0b0b0" fill="none"/>
                                                    <rect x="4" y="11" width="16" height="12" rx="2" stroke="#b0b0b0" fill="none"/>
                                                    <circle cx="12" cy="17" r="3" fill="#b0b0b0"/>
                                                </svg>
                                            </span>
                                            <input type="password" id="confirmPassword" style="font-size:12px;color:#B0B0B0;padding-left:30px;padding-top:25px; padding-bottom:25px;" v-model="form.confirmPassword" class="form-control mt-1" placeholder="***********" required>
                                        </div>
                                    </div><!-- End .form-group -->
                                    <p class="change-phone password-check">{{passwordMsg}}</p>
                                    <div class="form-footer-submit mt-2">
                                        <input type="submit" value="Reset Password">
                                    </div><!-- End .form-footer -->
                                </form>
                                </div><!-- .End .tab-pane -->
                            </div><!-- End .tab-content -->
                            <p class="text-center mt-2" style="font-size:16px; color:#b0b0b0;display:flex;justify-content: center;align-items: center"><span @click="LoginPageBack" style="cursor:pointer"><i class="icon-long-arrow-left" style="font-size:20px"></i>Back to Login</span></p>
                        </div>
                    </div><!-- End .form-box -->
                </div>
                <div class="login-page-style" style="width:50%;height:calc(100% - 40px);background:#F2F7FF;border-radius:24px;position:relative">
                    <div class="login-right" style="position:absolute;width:85%;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;justify-content:center">
                        <img :src="'/forgot-password.png'" style="border-radius:24px;" v-if="!newpasswordsec">
                        <img :src="'/reset password.png'" style="border-radius:24px;" v-if="newpasswordsec">
                    </div>
                </div>
            </div>
        </div><!-- End .container -->
    </main><!-- End .main -->
</template>
<style scoped>
.pin-code-sent{
    font-size:34px;
    color:#28aae2!important;
    margin-bottom:10px;
    margin-top:10px;
}
.resend-code-span{
    cursor:pointer;
    font-weight:400;
    color:#0067D2;
}
.form-footer-submit input{
    color:#fff;
    font-size:16px;
    font-weight: 500;
    width:100%;
    border:none;
    padding:12px;
    border-radius:6px;
    background-color: #28aae2!important;
}
.forgot-link{
    font-size:12px;
    color: #28aae2!important;
}
.form-control{
    border-color: #28aae2;;
}
.login-loader{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
}
input:focus {
  outline: none;
  box-shadow: none;
  border-color: none;
}
.login-loader .loader{
  width:auto;
  height:10px;
  margin:0 20px 20px 20px;
  display:flex;
  justify-content:space-between;
}
.login-loader .step{
  width:100%;
  height:10px;
  border-radius:5px;
}
.login-loader .step .gb{
  background:#28aae2;
  margin-right:10px;
}
.login-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%);}
}

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;
}
.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) {
    .form-box{
        min-width: 0;
        /* max-width: 570px; */
        padding: 2rem
    }
}
@media screen and (max-width: 990px) {
    .login-page-style{
        display:none
    }
    .login-section{
        width:100%!important;
        text-align:center!important;
    }
    .main{
        padding-bottom:0!important
    }
    .logo-login{
        justify-content: center!important;
    }
 
}
</style>
