<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const route = useRouter();
const paymentId = ref(route.currentRoute.value.params.id)
const orderID = ref(route.currentRoute.value.params.orderId)
let setting = computed(() => store.state.settings)
let paymentMethod = ref()
let order = ref()
let form = reactive({
    'transactionNo':'',
    'orderId':orderID,
    'paymentMethod':paymentId.value,
    'amount':'',
    'fee':''
})
const normal = async()=>{
    store.dispatch("Loader",true)
    await axios.post('/api/setting-get').then(response => {
        axios.post('/api/payment-method/'+paymentId.value+'/'+orderID.value).then(response => {
            store.dispatch("Loader",false)
            if(response.data.success == true){
                paymentMethod.value = response.data.data
                order.value = response.data.order
                form.amount = parseInt(order.value.due_amount)
                form.fee = parseInt((((paymentMethod.value.fee)/1000) * (order.value.due_amount)))
            }else{
                route.go('/')
            }
        })
    })
}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    store.dispatch('mobileMenuHideShow', false)  
    store.dispatch("SearchText", null)
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    store.dispatch('CartCompare','0px')
    store.dispatch('HeaderFooterOff',true)
})
let loader = ref(false)
const ConfirmPayment = async()=>{
    store.dispatch("Loader",true)
    axios.post('/api/confirm-payment', form).then(response =>{
        store.dispatch("Loader",false)
        let paymentstatus = response.data.payment_status
        store.dispatch('OrderStatusUpdate', orderID.value)
        route.push('/order/order-confirmation/850'+orderID.value)
    })
}
</script>
<template>
<main class="main">
    <div class="login-page">
        <div class="container-fluid">
            <div class="form-box">
                <div class="form-tab">
                    <ul class="nav nav-pills nav-fill">
                        <li class="nav-item">
                            <a class="nav-link active"><strong v-if="paymentMethod">{{paymentMethod.name}}</strong> Payment</a>
                        </li>
                    </ul>
                    <div class="payment-topbar" v-if="order && order.due_amount == 0">
                        <h1>স্বাগতম <strong v-if="order">{{order.ship_name}} {{order.ship_last_name}}</strong></h1><br>
                        <h1>ধন্যবাদ। আপনার <strong v-if="order">{{ order.order_no }} </strong> নম্বর অর্ডারের পেমেন্ট সম্পন্ন হয়েছে।</h1>
                    </div>
                    <div class="payment-topbar" v-if="order && order.due_amount > 0">
                        <h1>স্বাগতম <strong v-if="order">{{order.ship_name}} {{order.ship_last_name}}</strong></h1><br>
                        <h1>আপনার অর্ডারটি গ্রহণ করা হয়েছে।</h1>
                        <h1>অনুগ্রহ করে পেমেন্টটি সম্পন্ন করতে নিচের ধাপগুলো অনুসরণ করুন :</h1>
                    </div>
                    <div class="payment-list" v-if="order && order.due_amount > 0">
                        <ul>
                            <li v-if="paymentMethod">1. {{paymentMethod.dial_no}} ডায়াল করে মোবাইল মেনুতে যান অথবা অ্যাপ ব্যবহার করুন।</li>
                            <li>2. "সেন্ড মানি" সিলেক্ট করুন। </li>
                            <li v-if="paymentMethod">3. আমাদের পার্সোনাল বিকাশ একাউন্ট নম্বরটি <strong>{{paymentMethod.no}}</strong> প্রবেশ করান।</li>
                            <li v-if="order && paymentMethod">4. অর্ডারের মোট <strong>{{order.due_amount}}</strong> টাকা এবং ফি <strong>{{parseInt((((paymentMethod.fee)/1000) * (order.due_amount)))}}</strong> টাকা।</li>
                            <li v-if="order && paymentMethod">5. মোট <strong>{{parseInt(order.due_amount) + parseInt((((paymentMethod.fee)/1000) * (order.due_amount)))}}</strong> টাকা প্রবেশ করান।</li>
                            <li v-if="order">6. রেফারেন্স হিসেবে <strong>{{order.id}}</strong> এই নম্বরটি প্রবেশ করান।</li>
                            <li>7. আপনার বিকাশ পিনটি দিয়ে পেমেন্ট সম্পন্ন করুন এবং নিচের ইনপুট মেনুতে ট্রানজেকশন নম্বর দিন।</li>
                        </ul>
                    </div>
                    <div class="helpline" v-if="order && order.due_amount > 0">
                        <h1>যেকোনো সাহায্যের জন্য আমাদের কাস্টমার কেয়ার <strong>{{setting.support_phone}}</strong> নম্বরে যোগাযোগ করুন।</h1>
                    </div>
                    <div class="tab-content mt-2" v-if="order && order.due_amount > 0">
                        <div class="tab-pane fade show active" id="signin-2" role="tabpanel" aria-labelledby="signin-tab-2">
                            <form @submit.prevent="ConfirmPayment">
                                <div class="form-group">
                                    <label for="register">ট্রানজেকশন আইডি অথবা সেন্ড নম্বর প্রবেশ করান:</label>
                                    <input type="text" id="register" style="text-transform:uppercase" v-model="form.transactionNo" class="form-control" required>
                                </div><!-- End .form-group -->
                                <div class="form-footer">
                                    <button type="submit" class="btn btn-outline-primary-2">
                                        <span>CONFIRM PAYMENT</span>
                                        <i class="icon-long-arrow-right"></i>
                                    </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>
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
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;
    border-radius: 10px;
    background: #E6EBF0;
    margin: 20px 0;
    padding: 20px;
}
.payment-list ul li{
    font-size: 17px;
    margin-top:5px;
    color: #000;
}
.payment-list ul li strong, .payment-topbar h1 strong, .helpline h1 strong{
    font-size: 18px;
    font-weight: 600;
    color: #39f;
}
.payment-list{
    margin: 20px 0;
}
.payment-topbar{
    margin-top: 20px;
}
.payment-topbar h1, .helpline h1{
    font-size: 18px!important;
    text-align:center;
    line-height: 2;
}

@media screen and (max-width: 768px) {
    .form-box{
        min-width: 0;
        /* max-width: 570px; */
        padding: 2rem
    }
}
.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: v-bind(setting.color);
    border-color: v-bind(setting.color);
    box-shadow: none
}
.btn-outline-primary-2 {
    color: v-bind(setting.color);
    background-color: transparent;
    background-image: none;
    border-color: v-bind(setting.color);
    box-shadow: none
}
</style>