Vue.component('checkout', {
template: `
<div id="checkout">


    <b-card no-body>
        <div class="stepper">
            <div class="step" v-bind:class="{active : step == 1, previous : step > 1}">
                <div id="number">Step 1</div>
                <div id="headline">Review</div>


            </div>
            <div class="step" v-bind:class="{active : step == 2, previous : step > 2}">
                <div id="number">Step 2</div>
                <div id="headline">Address</div>
            </div>
            <div class="step" v-bind:class="{active : step == 3, previous : step > 3}">
                <div id="number">Step 3</div>
                <div id="headline">Payment</div>
            </div>
            <div class="step" v-bind:class="{active : step == 4, previous : step > 3}">
                <div id="number">Step 4</div>
                <div id="headline">Receipt</div>
            </div>

        </div>
    </b-card>

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

    <div v-if="step == 1">
        <b-card>
            <checkout_review v-bind:api_url="api_url" v-bind:site_url="site_url"
                             v-bind:shopping_cart="shopping_cart"
                             v-on:review_update="updateReview"></checkout_review>


        </b-card>

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

        <a class="btn btn-success checkout_continue" v-on:click="nextStep()">Continue<i
                    class="fal fa-arrow-right"></i></a>
    </div>

    <div v-if="step == 2">
        <b-card>
            <b>Note: </b>(For standard delivery only) We deliver from 9am to 6pm, if you will be at work during
            that time, please choose your work address.<br/><br/>
            <account_addresses :api_url="api_url" :site_url="site_url" :selection_mode="true"
                               v-on:address_update="updateAddress"
                               v-if="current_user != null"></account_addresses>

            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <form v-if="current_user == null" action="#!" @submit="nextStep" onsubmit="return false;"
                          id="checkout_address_form">


                        <enas_input :value_model.sync="address.title" label="Address title (eg. home, work, etc.)"
                                    :required="true"></enas_input>

                        <enas_input :value_model.sync="address.guest_name" label="Name"
                                    :required="true"></enas_input>


                        <enas_input :value_model.sync="user_email" label="Email" type="email"
                                    :required="true"></enas_input>

                        <div class="row no-gutters">
                            <div class="col-sm-4">
                                <enas_input :value_model.sync="address.building"
                                            label="Building"
                                            :required="true"></enas_input>
                            </div>
                            <div class="col-sm-4">
                                <enas_input :value_model.sync="address.road" label="Road"
                                            :required="true"></enas_input>
                            </div>
                            <div class="col-sm-4">
                                <enas_input :value_model.sync="address.block"
                                            label="Block" :required="true"></enas_input>
                            </div>
                        </div>

                        <enas_input :value_model.sync="address.phone_number" label="Phone number"
                                    :required="true"></enas_input>
                        <enas_input :value_model.sync="address.memo"
                                    label="More details"></enas_input>

                        
                        <enas_input :value_model.sync="address.area" label="Area"
                                    :required="true"></enas_input>
                        

                        

                        

                        <b-btn type="submit" id="checkout_address_form_submit_button" style="display:none">
                            Next
                        </b-btn>
                    </form>
                </div>
            </div>

        </b-card>

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

        <a class="btn btn-success checkout_previous" v-on:click="prevStep()" href="#!"><i
                    class="fal fa-arrow-left"></i><span id="text">Previous step</span></a>
        <a class="btn btn-success checkout_continue" v-on:click="nextStep('check_address')"
           href="#!">Continue<i class="fal fa-arrow-right"></i></a>
    </div>

    <div v-if="step == 3">

        <b-card>

            <div style="font-size:21px">
                <div style="cursor:pointer" @click="payment_method = 'online_payment'"><i class="far"
                                                                                          v-bind:class="{'fa-check-circle': payment_method == 'online_payment', 'fa-circle': payment_method != 'online_payment'}"></i> Online Payment
                    . <span style="font-size: 12px;">(You'll receive a payment link once your order is confirmed, within few minutes of making the order)</span>
                </div>
                <div style="cursor:pointer" @click="payment_method = 'cash_on_delivery'"><i class="far"
                                                                                            v-bind:class="{'fa-check-circle': payment_method == 'cash_on_delivery', 'fa-circle': payment_method != 'cash_on_delivery'}"></i> Cash on delivery
                </div>
                <div style="cursor:pointer" @click="payment_method = 'card_on_delivery'"><i class="far"
                                                                                            v-bind:class="{'fa-check-circle': payment_method == 'card_on_delivery', 'fa-circle': payment_method != 'card_on_delivery'}"></i> Card on delivery
                    . <span style="font-size: 12px;">(not available for express 2hrs delivery)</span></div>

                <div style="cursor:pointer" @click="payment_method = 'benefit_on_delivery'"><i class="far"
                                                                                               v-bind:class="{'fa-check-circle': payment_method == 'benefit_on_delivery', 'fa-circle': payment_method != 'benefit_on_delivery'}"></i> Benefit Pay on delivery
                </div>
            </div>


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

                Processing your order... please wait.
                <div class="loader"></div>


            </div>

        </b-card>

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

        <a class="btn btn-success checkout_previous" v-on:click="prevStep()" href="#!" :disabled="is_processing"
           v-if="!is_processing"><i class="fal fa-arrow-left"></i><span
                    id="text">Previous step</span></a>
        <a class="btn btn-success checkout_continue" v-on:click="processOrder()" href="#!"
           :disabled="is_processing" v-if="!is_processing">Confirm order<i
                    class="fal fa-check"></i></a>

    </div>

    <div v-if="step == 4">

        <b-card>


            <div style="text-align:center;font-size:20px;color:green" v-if="porcessing_response != null">
                <i class="fas fa-check"></i>
                <br/> Your order is complete, will be delivered soon.
                <div v-if="current_user != null">
                    <br/><br/><br/>
                    Your can track your order&#039;s status from &#039;My Orders&#039; in your account
                </div>

                <div style="text-align:center">

                    <br/><br/>
                    Download our app to be up to date with the latest offers, and track your order in realtime.<br/>

                    <div style="text-align:center;display:inline-block">


                        <a href='https://play.google.com/store/apps/details?id=feehla.shopping&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'
                           target="_blank"><img
                                    alt='Get it on Google Play'
                                    src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'
                                    height="75"/></a>

                        <a href="https://itunes.apple.com/bh/app/feehla-shopping/id1448046420?mt=8"
                           target="_blank"><img
                                    src="https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2018-12-31&kind=iossoftware&bubble=ios_apps"
                                    height="50"/></a>

                        <br/>

                        <img src="https://enaseej-assets.s3.us-east-2.amazonaws.com/images/app_qrcode.png"/>


                    </div>

                    <img src="https://enaseej-assets.s3.us-east-2.amazonaws.com/images/app_banner_empty.jpg"
                         style="width:100%;max-width:500px;margin-bottom:-20px"/>

                </div>

            </div>

        </b-card>

    </div>

    <div style="height:100px"></div>

</div>
`,
props: ['api_url', 'site_url', 'shopping_cart', 'current_user'],
data: function () {
return {
is_loading: true,
is_processing: false,
porcessing_response: null,
step: 1,
review: {
'review_token': ''
},
user_email: '',
address: {
title: '',
building: '',
road: '',
block: '',
area: '',
phone_number: '',
memo: '',
guest_name: ''
},
payment_method: 'online_payment',
areas: [
{
"name_ar": "المنامة",
"name_en": "Manama"
},
{
"name_ar": "الجفير",
"name_en": "Juffair"
},
{
"name_ar": "العدلية",
"name_en": "Adliya"
},
{
"name_ar": "البرهامة",
"name_en": "Burhama"
},
{
"name_ar": "الديه",
"name_en": "Daih"
},
{
"name_ar": "مدينة عيسى",
"name_en": "Isa Town"
},
{
"name_ar": "مدينة حمد",
"name_en": "Hamad Town"
},
{
"name_ar": "منقطة أخرى",
"name_en": "Other"
}
],
e1: 0
}

},

methods: {
nextStep: function (what = null) {
if (what == 'check_address') {
if (this.current_user == null) {
$("#checkout_address_form_submit_button").trigger("click");
} else {
this.user_email = this.current_user.email;
if (this.address == null || this.address.block.length < 1) {
alert("Please select an address");
} else {
this.step++;
}
}
} else {
this.step++;
}
},
prevStep: function () {
this.step--;
},
updateAddress: function (newAddress) {
this.address = newAddress;
},
updateReview: function (newReview) {


this.review = newReview;
},
processOrder: function () {
this.is_processing = true;

var thisCompo = this;

const params = new URLSearchParams();

var user_id = null;
if (this.current_user != null) {
user_id = this.current_user.id;
params.append('access_token', getCookie('access_token'));
}

params.append('review_token', this.review.review_token);
params.append('address', JSON.stringify(this.address));
params.append('payment_method', this.payment_method);
params.append('email', this.user_email);
params.append('source_platform', 'website');

axios.post('https://api.feehla.com/api/v1/checkout/process', params)
.then(function (response) {
if (response.data.success) {
thisCompo.porcessing_response = response.data;
thisCompo.is_processing = false;
thisCompo.nextStep();

fbq('track', 'Purchase', {value: parseFloat(thisCompo.review.grand_price).toFixed(3), currency: 'BHD'});

gtag('event', 'conversion', {
'send_to': 'AW-969130814/TeEoCJbipKMBEL6Gj84D',
'value': thisCompo.review.grand_price,
'currency': 'BHD',
'transaction_id': ''
});


// one more thing, let's clear the shopping cart
const params = new URLSearchParams();
if (thisCompo.current_user != null) {
params.append('access_token', getCookie('access_token'));
}
params.append('list_id', getCookie('enaseej_scid'));
axios.post(thisCompo.api_url + '/shopping_list/clear_list', params);

} else {
alert("An error has occured, please contact our customer support. reference number: 0421547");
}
})
.catch(function (error) {
console.log(error);
});


}
},
watch: {
api_url: {
handler: function (newVal, oldVal) {

}
}
},
created: function () {

fbq('track', 'InitiateCheckout');


}
});