 <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 UserLogged = computed(() => store.state.UserLogged)
let loginLoader = ref(false)
let form = reactive({
    'phone_no':'',
    'password':''
})
let defaultToken = localStorage.getItem('defaultToken')
let errorMsg = ref()
const userLogin = async()=>{
    if(loginLoader.value == false){
        loginLoader.value = true
        axios.get('/login-post/'+form.phone_no+'/'+form.password+'/'+defaultToken).then(response =>{
        loginLoader.value = false
        if(response.data.success == true){
            location.reload();
            store.dispatch('UserLogged', true)
            route.push('/')
            let AuthTokenId = response.data.data.split('|')[0]
            store.dispatch('cartItem',AuthTokenId)
            localStorage.removeItem('defaultToken')
            localStorage.setItem('HolesaleBagauthToken',response.data.data)
        }else{
            errorMsg.value = response.data.message
        }
    })
    }
    
}
const HomePageBack= async()=>{
    route.push('/')
}
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)
}
</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 class="h2" style="font-size:30px">Log in to your account</div>
                                <p style="font-size:16px">Enter your Number & password to login</p>
                            </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="userLogin">
                                        <div class="form-group" style="position:relative;">
                                            <label for="register" 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>
                                            </label>
                                            <input type="tel" style="font-size:12px;color:#B0B0B0;padding-left:30px;padding-top:25px; padding-bottom:25px;" placeholder="Phone Number" maxlength="11" id="register" v-model="form.phone_no" class="form-control" required>
                                        </div>
                                        <div class="form-group" style="position:relative;">
                                            <label for="password" 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>
                                            </label>
                                            <input id="password" type="password" style="font-size:12px;color:#B0B0B0;padding-left:30px;padding-top:25px; padding-bottom:25px;" placeholder="Password" v-model="form.password" class="form-control" required>
                                        </div>
                                        <span style="color:red" v-if="errorMsg">{{errorMsg}}</span>

                                        <div class="d-flex">
                                            <span class="col-6 text-left" style="color:#6d6d6d;font-size:12px;">
                                                <div class="input-remember" style="display:flex;justify-content: left;align-items: center;">
                                                    <input type="checkbox" id="rememberme" required><label for="rememberme" class="ml-1" style="margin:0">Remember me</label>
                                                </div>
                                            </span>
                                            <router-link to="/forgot-password" class="forgot-link col-6 text-right">Forgot Your Password?</router-link>
                                        </div><!-- End .form-footer -->
                                        <div class="form-footer-submit mt-2">
                                            <input type="submit" value="Log in">
                                        </div><!-- End .form-footer -->

                                        <div class="d-flex col-12 mt-2">
                                            <span style="font-size:12px;font-weight:400;">Don't have an account?</span> <router-link to="/register" class="ml-2 forgot-link text-left">Register here</router-link>
                                        </div><!-- End .form-footer -->
                                    </form>
                                    <p class="text-center mt-2" style="font-size:16px; color:#b0b0b0;display:flex;justify-content: center;align-items: center"><span style="cursor:pointer" @click="HomePageBack"><i class="icon-long-arrow-left" style="font-size:20px"></i>Back to Home</span></p>
                                </div><!-- .End .tab-pane -->
                            </div><!-- End .tab-content -->
                        </div>
                    </div><!-- End .form-box -->
                </div>
                <!-- <div class="login-page-style" style="width:50%;height:calc(100% - 40px);background:#2198C9;border-radius:24px;position:relative">
                    <div class="login-right" style="position:absolute;width:85%;left:50%;top:50%;transform:translate(-50%,-50%)">
                        <img :src="'/login page.png'" style="border-radius:24px;">
                        <h1 class="text-white text-center mt-3" style="font-size:32px; font-weight:500">Scale your Bag Brand with the Right Retail and Wholesale Partners!</h1>
                        <p class="text-white text-center" style="font-size:14px;font-weight:400">Join the Wholesale Bag BD community now!</p>
                    </div>
                </div> -->
            </div>
        </div><!-- End .container -->
    </main><!-- End .main -->
</template>
<style scoped>
.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;
}

.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;
    }
    .log-header .h2{
        font-size:16px;
    }
}
</style>
