Vue.component('checkout_review', {
template: `
<div class="checkout_review">

    <div class="loader_placeholder">
        <div class="loader" v-if="is_loading"></div>
    </div>
    <div class="v-divider"></div>

    <div>

        <div class="orders">

            <div class="row">

                <div class="col-xs-12 col-md-6 col-lg-6" v-for="order in review.orders">

                    <div class="order">
                        <div id="vendor">

                            <div id="logo">
                                <img :src="order.vendor.logo_square_thumb" />
                            </div>
                            <div id="title">{{order.vendor.name_en}}</div>

                        </div>

                        <div id="items">

                            <div class="item" v-for="item in order.items">
                                <div id="thumb">
                                    <img :src="item.thumb_url" />
                                </div>
                                <div id="info">
                                    <div id="title">{{item.name_en}}</div>
                                    <div id="quantity">Quantity: {{item.quantity}} | per piece: {{item.price}}BD</div>
                                </div>
                            </div>

                            <div v-if="order.applied_coupon_text != ''" style="padding:5px;">
                                <div v-html="order.applied_coupon_text"></div>
                            </div>
                            <div class="v-divider"></div>


                        </div>

                        <div style="padding:10px">
                            <div class="v-divider"></div>
                            <div v-if="order.delivery_courier_id != 0">
                                <b-form-radio-group @change.native="deliveryOptionUpdated" v-model="order.delivery_option" :options="delivery_options" :name="'hk7ydiyd_'+order.vendor.id"><br />
                                </b-form-radio-group>


                            </div>
                        </div>

                        <div v-if="(order.delivery_option == 'express' || order.delivery_option == 'v2:1') && !order.vendor.open">
                            <div class="alert alert-warning" role="alert" style="margin-top:3px;border-radius:0;border: none">
                                This shop is currently closed, your order will be picked up as soon as it opens in
                                <vue-countdown-timer
                                        style="display:inline-block"
                                        :start-time="Date.now()"
                                        :end-time="order.vendor.next_opening_time"
                                        :interval="1000"
                                        start-label="Opens in"
                                        label-position="begin"
                                        end-text="Open"
                                        :showDay="false"
                                        :day-txt="null"
                                        :hour-txt="'hrs'"
                                        :minutes-txt="'min'"
                                        :seconds-txt="'sec'">
                                </vue-countdown-timer>
                                
                            </div>
                        </div>

                        <div id="summary">
                            Delivered by {{ order.delivered_by }} <strong>{{order.vendor.delivery_self_time}}</strong><br />

                            <div class="price">Total: {{order.total_items_price}}BD | Delivery: {{order.shipping_cost}}BD | Grand total: <b>{{order.grand_price}}BD</b></div>

                        </div>
                    </div>

                </div>

            </div>

            <div class="v-divider"></div>

            <div style="width:400px;">

                <input type="text" class="form-control" style="display: inline-block;max-width:200px ;" v-model="coupon_code" placeholder="Coupon code" />
                <button class="btn btn-primary" style="display: inline-block;" @click="requestReview">Apply</button>

            </div>


            <div class="v-divider"></div>
            <div style="height:70px">
                <div id="grand_summary" v-if="!is_loading">
                    <div id="price">Total: <b><span class="price_big"><span id="price">{{review.grand_price}}</span><span id="currency">{{review.grand_price_currency}}</span></span>  </b></div>
                </div>
            </div>

        </div>

    </div>



</div>
`,
props: ['api_url', 'site_url', 'shopping_cart'],
data: function () {
return {
is_loading: true,
review: [],
original_review: [],
coupon_code: '',
delivery_options: [
{
'text': 'Standard +1 BD (2 to 3 days)',
'value': 'standard'
},
{
'text': 'Express + 2BD (within 2 hours)',
'value': 'express'
}

]
}

},

methods: {

requestReview: function () {

if(this.shopping_cart == null || this.shopping_cart.length == 0) {
return;
}

var thisCompo = this;
this.is_loading = true;


var custom_options = [];
if (this.review != this.original_review) {
// something is custom,
// prepare custom options
for (i in this.review.orders) {
var order = this.review.orders[i];
var custom_option = {
'vendor_id': order.vendor.id,
'delivery_option': order.delivery_option
}

custom_options.push(custom_option);
}
}


axios.post(thisCompo.api_url + '/checkout/review', {
'shopping_cart': JSON.stringify(thisCompo.shopping_cart),
'custom_options': JSON.stringify(custom_options),
'coupon_code': thisCompo.coupon_code
})
.then(function (response) {
thisCompo.review = response.data.data;
thisCompo.original_review = JSON.parse(JSON.stringify(response.data.data));
// console.log(thisCompo.review);
thisCompo.$emit('review_update', thisCompo.review);
thisCompo.is_loading = false;
})
.catch(function (error) {

console.log(error);
});
},
deliveryOptionUpdated: function () {
var thisCompo = this;
setTimeout(function () {
thisCompo.requestReview();
}, 100);
}
},
watch: {
api_url: {
handler: function (newVal, oldVal) {
this.requestReview();
}
},
shopping_cart: {
handler: function (newVal, oldVal) {
if(newVal != oldVal) {
this.requestReview();
}
},
deep: true
},
// review: {
//     handler: function(newVal, oldVal) {
//         this.requestReview();
//     },
//     deep: true
// }
},
created: function () {
this.requestReview();
}
});