@extends('shop::layouts.master')

@section('page_title')
    {{ __('shop::app.checkout.onepage.title') }}
@endsection

@section('content-wrapper')
    <checkout></checkout>
@endsection

@push('scripts')
    <script type="text/x-template" id="checkout-template">
        <div id="ctm-checkout" class="font-weight-normal container-fluid"
             v-bind:class="{'px-5': !isMobileDevice, 'no-gutters small': isMobileDevice}">
            <div class="row text-muted">
                <div id="ctm-checkout-info" class="col-xs-12 col-sm-8 col-md-8 no-gutters">
                    <h4 class="mt-4 font-weight-normal text-muted">{{ __('velocity::app.checkout.checkout') }}</h4>
                    <div class="border border-bottom-0 border-secondary mt-3"></div>
                    <div class="col-12 mt-3">
                        <div id="accordion">
                            <div class="card">
                                <div class="card-header bg-dark text-light p-1 font-weight-bold pl-2">
                                    <a class="card-link text-decoration-none unset-link-color" data-toggle="collapse">
                                        {{ __('Select Billing & Shipping Address') }}
                                    </a>
                                </div>
                                <div class="collapse show" data-parent="#accordion">
                                    <div class="card-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex no-gutters px-0"
                                                v-for='(addresses, index) in this.allAddress'>
                                                <div class="col-1">
                                                    <input
                                                        type="radio"
                                                        name="address_id"
                                                        :value="addresses.id"
                                                        v-model="addressForm.address_id"
                                                        @change="validateAddressForm(addressForm)"
                                                        data-vv-as="&quot;{{ __('shop::app.checkout.onepage.billing-address') }}&quot;"/>
                                                </div>
                                                <div class="col-8 small">
                                                    <b class="card-title">@{{ addresses.name }}</b>

                                                    <ul type="none" class="nav">
                                                        <li v-if="addresses.gst_no">@{{ addresses.company_name }} (@{{
                                                            addresses.gst_no }}),
                                                        </li>
                                                        <li v-else-if="addresses.company_name">@{{
                                                            addresses.company_name
                                                            }},
                                                        </li>
                                                        <li>@{{ addresses.address1 }},&nbsp;&nbsp;</li>
                                                        <li>@{{ addresses.city }},&nbsp;&nbsp;</li>
                                                        <li>@{{ addresses.state }},&nbsp;&nbsp;</li>
                                                        <li>@{{ addresses.country }} (@{{ addresses.postcode
                                                            }})&nbsp;&nbsp;
                                                        </li>
                                                        <li>
                                                            {{ __('shop::app.customer.account.address.index.contact') }}
                                                            :
                                                            @{{ addresses.phone }}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="col-3 address-action">
                                                    <a href="javascript:void(0)" @click="onEditAddress(addresses)">
                                                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                                    </a>
                                                    <a :href="`{{ route('address.delete','') }}/${addresses.id}`"
                                                       @click="deleteConfirmation('{{ __('shop::app.customer.account.address.index.confirm-delete') }}')">
                                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li class="list-group-item text-center no-gutters p-0">
                                                <add-new-address-component
                                                    btn-label="{{ __('shop::app.checkout.onepage.new-address') }}"
                                                    modal-title="{{ __('shop::app.checkout.onepage.new-address') }}"
                                                    default-country="{{config('app.default_country') ?? 'IN'}}"
                                                    user="{{json_encode(auth()->guard('customer')->user())}}"
                                                    countries="{{json_encode(core()->countries())}}"
                                                    states="{{json_encode(core()->groupedStatesByCountries())}}"
                                                    post-route="{{ route('customer.address.create') }}"
                                                    btn-class="btn-outline-light text-dark"
                                                ></add-new-address-component>
                                            </li>
                                        </ul>
                                        <p class="text-danger pull-left pl-2"
                                           v-if="hasError(addressForm, 'address_id')"
                                           v-html="getErrorMessage(addressForm, 'address_id')"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="card text-muted" v-if="showOrderItemsSection">
                                <div class="card-header bg-dark text-light p-1 font-weight-bold pl-2">
                                    <a class="collapsed card-link text-decoration-none unset-link-color"
                                       data-toggle="collapse">
                                        {{ __('shop::app.checkout.onepage.summary') }}
                                    </a>
                                    <a href="{{route('shop.checkout.cart.index')}}" class="pull-right" style="color:#fff;padding-right: 10px;">
                                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                    </a>
                                </div>
                                <div class="collapse show" data-parent="#accordion">
                                    <div class="card-body no-gutters px-0" v-html="orderItemsHtml"></div>
                                </div>
                            </div>

                            <div class="card text-muted" v-if="showSummarySection && isMobileDevice">
                                <div class="card-header bg-dark text-light p-1 font-weight-bold pl-2">
                                    <a class="collapsed card-link text-decoration-none unset-link-color"
                                       data-toggle="collapse">
                                        {{ __('velocity::app.checkout.cart.cart-summary') }}
                                    </a>
                                </div>
                                <div class="collapse show" data-parent="#accordion">
                                    <div class="card-body p-0" v-if="showSummarySection" v-html="summaryHtml"></div>
                                </div>
                            </div>

                            <div class="card" v-if="showPaymentSection">
                                <div class="card-header bg-dark text-light p-1 font-weight-bold pl-2">
                                    <a class="collapsed card-link text-decoration-none unset-link-color"
                                       data-toggle="collapse">
                                        {{ __('shop::app.checkout.onepage.payment-methods') }}
                                    </a>
                                </div>
                                <div class="collapse show" data-parent="#accordion">
                                    <div class="card-body px-0">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex no-gutters"
                                                v-for="(paymentMethod, index) in paymentMethods">
                                                <div class="col-1">
                                                    <input
                                                        type="radio"
                                                        :id="paymentMethod.method"
                                                        :name="paymentMethod.method"
                                                        :value="paymentMethod.method"
                                                        v-model="paymentForm.method"
                                                        @change="methodSelected(paymentForm)"/>
                                                </div>
                                                <div class="col-11 small media" :class="{'d-block' : index == 0 && isMobileDevice}">
                                                    <div class="media-body">
                                                        <b class="card-title">@{{ paymentMethod.method_title }}</b><br>
                                                        <span v-html="paymentMethod.description"></span>
                                                    </div>
                                                    <div class="media-right media-middle">
                                                        <img class="media-object" height="100%" width="100%"
                                                             v-if="paymentMethod.imgPath"
                                                             :src="paymentMethod.imgPath"
                                                             alt="payment mode icon">
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item"
                                                v-if="paymentForm.method === 'BAJAJ-FINANCE' && showBajajFinanceBox">
                                                <div v-if="BFStep1 && !isMobileDevice" class="col-12">
                                                    <label
                                                        class="font-weight-bold">{{__('Bajaj EMI Card Number')}}</label>
                                                    <div class="input-group">
                                                        <input
                                                            type="text"
                                                            class="form-control"
                                                            id="cardNo"
                                                            name="cardNo"
                                                            v-model="step1.cardNo"
                                                            v-on:input="isValid(step1, 'cardNo')"
                                                            @change="isValid(step1, 'cardNo')"/>
                                                        <div class="input-group-append">
                                                            <button type="button" v-if="!bfStep1IsProcessing"
                                                                    class="btn btn-outline-primary"
                                                                    @click="onSubmitStep1(step1)">{{__('Check Schemes')}}
                                                            </button>
                                                            <button type="button" v-if="bfStep1IsProcessing"
                                                                    class="btn btn-light"
                                                                    disabled="disabled">{{__('Check Schemes')}}
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <span class="text-danger"
                                                          v-if="hasError(step1, 'cardNo')">@{{ getErrorMessage(step1, 'cardNo') }}</span>
                                                </div>
                                                <div v-if="BFStep1 && isMobileDevice" class="col-12 no-gutters">
                                                    <label
                                                        class="font-weight-bold">{{__('Bajaj EMI Card Number')}}</label>
                                                    <input
                                                        type="text"
                                                        class="form-control form-control"
                                                        id="cardNo"
                                                        name="cardNo"
                                                        v-model="step1.cardNo"
                                                        v-on:input="isValid(step1, 'cardNo')"
                                                        @change="isValid(step1, 'cardNo')"/>
                                                    <span class="text-danger"
                                                          v-if="hasError(step1, 'cardNo')">@{{ getErrorMessage(step1, 'cardNo') }}</span>
                                                    <div class="mt-2">
                                                        <button type="button" v-if="!bfStep1IsProcessing"
                                                                class="btn btn-outline-primary btn-sm btn-block"
                                                                @click="onSubmitStep1(step1)">{{__('Check Schemes')}}
                                                        </button>
                                                        <button type="button" v-if="bfStep1IsProcessing"
                                                                class="btn btn-outline-primary btn-sm btn-block"
                                                                disabled="disabled">{{__('Check Schemes')}}
                                                        </button>
                                                    </div>
                                                </div>

                                                <div v-if="BFStep2" class="col-12 no-gutters">
                                                    <label class="font-weight-bold">{{__('Choose Scheme')}}</label>
                                                    <div class="col-12">
                                                        <p class="text-muted">
                                                            <label>{{__('Customer belonging City')}}</label> : @{{
                                                            bajajFinanceFinalObj.searchResponse.CUST_RESI_CITY_NAME
                                                            }} - (@{{
                                                            bajajFinanceFinalObj.searchResponse.CUSTOMER_PINCODE }})
                                                        </p>
                                                    </div>
                                                    <div v-if="schemes.length > 0" class="col-12 table-responsive">
                                                        <table class="table">
                                                            <thead class="thead-dark">
                                                            <tr>
                                                                <td colspan="2">EMI * Months</td>
                                                                <td>Down Payment</td>
                                                                <td>Convinience Fees
                                                                    <info-popover-component
                                                                        body="Convinience Fees charged by Imagine"
                                                                    ></info-popover-component>
                                                                </td>
                                                                <td>Payable Now
                                                                    <info-popover-component
                                                                        body="(Down Payment + Convinence Fee)"
                                                                    ></info-popover-component>
                                                                </td>
                                                                <td>Overall Loan Amount
                                                                    <info-popover-component
                                                                        body="(Cart Amount + Processing Fees + Convinience Fees)"
                                                                    ></info-popover-component>
                                                                </td>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr v-for="scheme in schemes">
                                                                <td>
                                                                    <input name="scheme" type="radio"
                                                                           @change="onSchemeSelect(scheme)">
                                                                </td>
                                                                <td class="small text-muted">₹@{{ scheme.emiAmount
                                                                    }} * @{{ scheme.tenor }}
                                                                </td>
                                                                <td class="small text-muted">₹@{{ scheme.downPayment
                                                                    }}
                                                                </td>
                                                                <td class="small text-muted">{{ core()->currency(config('BajajFinanceConfiguration.BAJAJ_CONVINIENCE_FEE')) }}</td>
                                                                <td class="small text-muted">₹@{{
                                                                    scheme.downPayment}}
                                                                    + {{core()->currency(config('BajajFinanceConfiguration.BAJAJ_CONVINIENCE_FEE'))}}</td>
                                                                <td class="small text-muted">
                                                                    {{core()->currency($cart->base_grand_total)}} +
                                                                    ₹@{{scheme.processingFee}}
                                                                    + {{core()->currency(config('BajajFinanceConfiguration.BAJAJ_CONVINIENCE_FEE'))}}
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <div v-else class="col-12">
                                                        <div class="alert alert-danger" role="alert">
                                                            <h6>Intercity error <a class="link"
                                                                                   href="javascript:void(0)"
                                                                                   @click="toggleAddressPopUp()">Add
                                                                    New Address</a></h6>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 d-flex no-gutters mt-3" v-if="BFStep2_1">
                                                        <div class="col-8">
                                                            <input name="tandc" type="checkbox"
                                                                   @change="toggleTC()"> I accept all term and
                                                            conditions.
                                                            <a href="https://drive.google.com/file/d/1i-6pJAb-O0f5B7CPXzb_Rz2sx6UkVpwa/view?usp=sharing" target="_blank">Click here to read T&C</a>
                                                        </div>
                                                        <div class="col-4">
                                                            <button v-if="!bfStep2_1IsProcessing"
                                                                    class="btn btn-outline-primary"
                                                                    @click="doGenerateOTP()">{{__('Generate OTP')}}
                                                            </button>
                                                            <button v-if="bfStep2_1IsProcessing"
                                                                    class="btn btn-light"
                                                                    disabled="disabled">{{__('Generate OTP')}}
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div v-if="BFStep3" class="no-gutters col-12">
                                                    <label
                                                        class="font-weight-bold">{{__('Selected Scheme Detail')}}</label>
                                                    <ul class="list-group list-group-flush">
                                                        <li class="list-group-item no-gutters d-flex">
                                                            <div
                                                                class="col-8 font-weight-bold">{{__('Customer belonging City')}}</div>
                                                            <div class="col-4">
                                                                @{{bajajFinanceFinalObj.searchResponse.CUST_RESI_CITY_NAME}}
                                                                -
                                                                (@{{bajajFinanceFinalObj.searchResponse.CUSTOMER_PINCODE
                                                                }})
                                                            </div>
                                                        </li>
                                                        <li class="list-group-item no-gutters d-flex">
                                                            <div class="col-8 font-weight-bold">EMI * Months</div>
                                                            <div class="col-4">
                                                                ₹@{{
                                                                bajajFinanceFinalObj.selectedScheme.emiAmount }}
                                                                * @{{ bajajFinanceFinalObj.selectedScheme.tenor
                                                                }}
                                                            </div>
                                                        </li>
                                                        <li class="list-group-item no-gutters d-flex">
                                                            <div class="col-8 font-weight-bold">Down Payment</div>
                                                            <div class="col-4">
                                                                ₹@{{bajajFinanceFinalObj.selectedScheme.downPayment}}
                                                            </div>
                                                        </li>
                                                        <li class="list-group-item no-gutters d-flex">
                                                            <div class="col-8 font-weight-bold">
                                                                Convinience Fees
                                                                <info-popover-component
                                                                    body="Convinience Fees charged by Imagine"
                                                                ></info-popover-component>
                                                            </div>
                                                            <div class="col-4">
                                                                {{core()->currency(config('BajajFinanceConfiguration.BAJAJ_CONVINIENCE_FEE'))}}
                                                            </div>
                                                        </li>
                                                        <li class="list-group-item no-gutters d-flex">
                                                            <div class="col-8 font-weight-bold">
                                                                Payable Now
                                                                <info-popover-component
                                                                    body="Payable Now = Down Payment + Convinience Fee"
                                                                ></info-popover-component>
                                                            </div>
                                                            <div class="col-4">₹@{{
                                                                bajajFinanceFinalObj.selectedScheme.downPayment
                                                                }}
                                                                + {{core()->currency(config('BajajFinanceConfiguration.BAJAJ_CONVINIENCE_FEE'))}}</div>
                                                        </li>
                                                    </ul>
                                                    <div class="col-12" v-if="BFStep3_1">
                                                        <div class="input-group">
                                                            <input
                                                                type="text"
                                                                class="form-control"
                                                                id="otp"
                                                                name="otp"
                                                                placeholder="Enter OTP"
                                                                v-model="step3.otp"
                                                                v-on:input="isValid(step3, 'otp')"
                                                                @change="isValid(step3, 'otp')"/>
                                                            <div class="input-group-append">
                                                                <button v-if="!bfStep3IsProcessing"
                                                                        class="btn btn-outline-primary"
                                                                        @click="doValidateOTP(step3)">
                                                                    {{__('Validate OTP')}}
                                                                </button>
                                                                <button v-if="bfStep3IsProcessing"
                                                                        class="btn btn-light"
                                                                        disabled="disabled">{{__('Validate OTP')}}
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <p class="text-danger"
                                                           v-if="hasError(step3, 'otp')">@{{ getErrorMessage(step3,
                                                            'otp')
                                                            }}</p>
                                                    </div>
                                                    <div class="col-12 alert alert-success text-center" role="alert"
                                                         v-else>
                                                        <h6>
                                                            <i class="fa fa-check" aria-hidden="true"></i>
                                                            Verified please proceed with order placement
                                                        </h6>
                                                    </div>
                                                </div>
                                            </li>
                                            <p class="text-danger pull-left pl-2"
                                               v-if="hasError(paymentForm, 'method')"
                                               v-html="getErrorMessage(paymentForm, 'method')"></p>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="ctm-checkout-summary" class="col-xs-12 col-sm-4 col-md-4 no-gutters">
                    <div class="no-gutters" style="position:sticky; top:100px">
                        <h4 v-if="!isMobileDevice" class="mt-4 font-weight-normal text-muted">{{ __('velocity::app.checkout.cart.cart-summary') }}</h4>
                        <div v-if="!isMobileDevice" class="border border-bottom-0 border-secondary mt-3"></div>
                        <div class="col-12 mt-3" v-if="showSummarySection && !isMobileDevice" v-html="summaryHtml"></div>
                        <div class="col-12 mt-4">
                            <div class="alert alert-warning" role="alert" v-if="haveMixedProducts">
                                <h6 class="font-weight-normal">Please place seperate order for <b>Pre Booking</b>
                                    products.
                                    <a href="{{route('shop.checkout.cart.index')}}">Click here</a> to update
                                    cart.
                                </h6>
                            </div>

                            <div class="text-center mt-2 mb-2">
                                <button
                                    v-if="!isPlaceOrderEnabled"
                                    type="button"
                                    disabled
                                    class="btn btn-block btn-light"
                                    id="checkout-place-order-button">
                                    {{ __('shop::app.checkout.onepage.place-order') }}
                                </button>
                                <button
                                    v-else
                                    type="button"
                                    class="btn btn-block btn-primary"
                                    id="checkout-place-order-button" C
                                    @click="placeOrder()">
                                    {{ __('shop::app.checkout.onepage.place-order') }}
                                </button>
                                <a href="https://wa.me/919609870000?text=Hello%2C%20I%20need%20help%20with%20payment%20options"
                                   class="btn btn-outline-success mt-4" target="_blank" rel="noopener">Have questions?
                                    Talk to
                                    our Experts <i class="fa fa-whatsapp" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/javascript">
        (() => {
            Vue.component('checkout', {
                template: '#checkout-template',
                data: function () {
                    return {
                        isMobileDevice: this.$root.isMobile(),
                        allAddress: @json(auth('customer')->user()->addresses),
                        addressForm: {
                            address_id: null,
                            rules: {
                                address_id: {
                                    required: {
                                        is_invalid: false,
                                        message: 'Please select address'
                                    },
                                },
                            }
                        },

                        paymentMethods: [],
                        showPaymentSection: false,
                        paymentForm: {
                            method: "",
                            mode: null,
                            mode_value: null,
                            is_cod: 0,
                            rules: {
                                method: {
                                    required: {
                                        is_invalid: false,
                                        message: 'Please select payment option'
                                    },
                                },
                            }
                        },

                        orderItemsHtml: null,
                        showOrderItemsSection: false,

                        summaryHtml: null,
                        showSummarySection: false,

                        showBajajFinanceBox: false,
                        bfStep1IsProcessing: false,
                        bfStep2_1IsProcessing: true,
                        bfStep3IsProcessing: false,
                        BFStep1: true,
                        BFStep2: false,
                        BFStep3: false,
                        BFStep2_1: false,
                        BFStep3_1: false,
                        step1: {
                            cardNo: null,
                            rules: {
                                cardNo: {
                                    required: {
                                        is_invalid: false,
                                        message: 'This field is required'
                                    },
                                    pattern: {
                                        is_invalid: false,
                                        message: 'Enter 16 digit card number',
                                        regex: '^[0-9]{16}$'
                                    }
                                },
                            }
                        },
                        step3: {
                            otp: null,
                            rules: {
                                otp: {
                                    required: {
                                        is_invalid: false,
                                        message: 'This field is required'
                                    },
                                    pattern: {
                                        is_invalid: false,
                                        message: 'Enter 6 digit OTP',
                                        regex: '^[0-9]{6}$'
                                    }
                                },
                            }
                        },
                        bajajFinanceFinalObj: {},
                        schemes: [],

                        shippingsMethods: [],
                        shipping: {method: null},

                        isPlaceOrderEnabled: false,
                        paymentUrl: null,
                        haveMixedProducts: false,
                    }
                },
                created: function () {
                    // this.placeOrderCounterMatched = (this.paymentForm.method === 'BAJAJ-FINANCE') ? 5 : 3;
                    eventBus.$on('REFRESH_CHECKOUT_PAGE', value => {
                        if (!!value) {
                            window.location.href = "{{ route('shop.checkout.cart.index') }}";
                        }
                    });

                    eventBus.$on('NEW_ADDRESS_ADDED', object => {
                        this.allAddress = object.data;
                        this.addressValidation();
                    });

                    this.addressValidation();
                },
                methods: {
                    addressValidation: function () {
                        if (this.allAddress.length < 1) {
                            setTimeout(() => {
                                this.toggleAddressPopUp();
                            }, 1000)
                        } else {
                            this.addressForm.address_id = this.allAddress[0].id;
                            this.validateAddressForm(this.addressForm);

                            // scrolling to placeorder button
                            /*setTimeout(function() {
                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $("#checkout-place-order-button").offset().top
                                }, 1000);
                            }, 1500);*/
                        }
                    },
                    validateAddressForm: function (obj) {
                        this.$root.toggleCursor('wait')

                        for (const [key, value] of Object.entries(obj)) {
                            if (key !== 'rules') {
                                this.$root.isValid(obj, key);
                            }
                        }

                        this.$root.doValidateForm(obj).then(res => {
                            if (res.status) {
                                this.$root.toggleCursor('default')
                                this.saveAddress(obj)
                            } else {
                                this.$root.toggleCursor('default')
                                console.error(res);
                                window.showAlert(`alert-danger`, '', 'Unable to proceed with payment, seems to be an error or some mandatory field is not selected');
                            }
                        }, error => {
                            this.$root.toggleCursor('default')
                            console.error(error);
                            window.showAlert(`alert-danger`, '', error);
                        });
                    },
                    saveAddress: function (obj) {
                        try {
                            this.$root.toggleCursor('wait')
                            this.isPlaceOrderEnabled = false;

                            this.$http.get("{{ route('shop.checkout.save-address') }}", {
                                params: {
                                    addressId: obj.address_id,
                                }
                            }).then(response => {
                                if (response.data.code === 200) {
                                    if (response.data.haveMixedProducts) {
                                        /*
                                        * If haveMixedProducts is true then disable place order button and dosplay error alert
                                        * */
                                        this.isPlaceOrderEnabled = false;
                                        this.haveMixedProducts = response.data.haveMixedProducts;
                                        return;
                                    }
                                    if (response.data.orderItemsHtml) {
                                        this.orderItemsHtml = response.data.orderItemsHtml;
                                        this.showOrderItemsSection = true;
                                    }

                                    if (response.data.orderSummaryHtml) {
                                        this.summaryHtml = response.data.orderSummaryHtml;
                                        this.showSummarySection = true;
                                    }

                                    if (response.data.paymentMethods) {
                                        this.paymentMethods = response.data.paymentMethods;
                                        this.showPaymentSection = true;
                                        // saving first payment method as default method
                                        if (!this.paymentForm.method) {
                                            this.paymentForm.method = response.data.paymentMethods[0].method
                                            this.methodSelected(this.paymentForm);
                                        }
                                    }

                                    if (response.data.shippingsMethods) {
                                        this.shippingsMethods = response.data.shippingsMethods.shippingMethods;
                                        // saving first shipping method as default method
                                        if (!this.shipping.method) {
                                            for (method in this.shippingsMethods) {
                                                if (!this.shipping.method) {
                                                    for (rate in this.shippingsMethods[method]['rates']) {
                                                        this.shipping.method = this.shippingsMethods[method]['rates'][rate].method;
                                                    }
                                                }
                                            }
                                            this.shippingMethodSelected();
                                        }
                                    }
                                    this.$root.toggleCursor('default');
                                    this.isPlaceOrderEnabled = true;

                                    /*This is to reset bajaj steps and form values if bajaj option selected previously and then address changed*/
                                    this.toggleSteps('BFStep1');
                                    this.resetBajajValues();
                                    this.bfStep2_1IsProcessing = true;
                                    /*end*/
                                } else {
                                    /*
                                    * If there is any error in saving address raised by api then,
                                    * hide all options from checkout page
                                    * */
                                    this.$root.toggleCursor('default');
                                    this.isPlaceOrderEnabled = false;
                                    this.showOrderItemsSection = false;
                                    this.showSummarySection = false;
                                    this.showPaymentSection = false;
                                    throw (response.data.message);
                                }
                            }).catch(error => {
                                this.$root.toggleCursor('default');
                                this.isPlaceOrderEnabled = false;
                                window.showAlert(`alert-danger`, '', error);
                            })
                        } catch (e) {
                            this.$root.toggleCursor('default');
                            this.isPlaceOrderEnabled = false;
                            window.showAlert(`alert-danger`, '', e);
                        }
                    },
                    methodSelected: function (obj) {
                        this.$root.toggleCursor('wait');
                        this.showBajajFinanceBox = false

                        for (const [key, value] of Object.entries(obj)) {
                            if (key !== 'rules') {
                                this.$root.isValid(obj, key);
                            }
                        }

                        this.$root.doValidateForm(obj).then(res => {
                            if (res.status) {
                                this.resetObjectPayment();

                                if (this.paymentForm.method === 'cashondelivery') {
                                    for (const [key, value] of Object.entries(this.paymentMethods)) {
                                        if (value.method === 'cashondelivery') {
                                            this.paymentForm.mode = value.mode;
                                            this.paymentForm.mode_value = value.mode_value;
                                            this.paymentForm.is_cod = 1;
                                        }
                                    }
                                }
                                if (this.paymentForm.method === 'BAJAJ-FINANCE') {
                                    // resetting values
                                    this.resetBajajValues();
                                    // end resetting values
                                    this.toggleSteps('BFStep1');
                                    this.bfStep2_1IsProcessing = true;
                                    this.showBajajFinanceBox = true;
                                }
                                this.$root.toggleCursor('default');
                                this.savePayment();
                            } else {
                                this.$root.toggleCursor('default');
                                console.error(res);
                                window.showAlert(`alert-danger`, '', 'Unable to proceed with payment, seems to be an error or some mandatory field is not selected');
                            }
                        }, error => {
                            this.$root.toggleCursor('default');
                            console.error(error);
                            window.showAlert(`alert-danger`, '', error);
                        });
                    },
                    resetObjectPayment: function () {
                        this.paymentForm.mode = null;
                        this.paymentForm.mode_value = null;
                        this.paymentForm.is_cod = 0;
                    },
                    resetBajajValues: function () {
                        this.bajajFinanceFinalObj = {};
                        this.step1.cardNo = null;
                        this.step3.otp = null;
                    },
                    toggleSteps: function (step) {
                        this.BFStep1 = false;
                        this.BFStep2 = false;
                        this.BFStep2_1 = false;
                        this.BFStep3 = false;
                        this.BFStep3_1 = false;

                        this[step] = true;
                    },
                    savePayment: function () {
                        if (this.paymentForm.method) {
                            this.$root.toggleCursor('wait');
                            this.isPlaceOrderEnabled = false;
                            this.$http.get("{{ route('shop.checkout.save-payment') }}", {
                                params: this.paymentForm
                            }).then(response => {
                                if (response.data.code === 200) {
                                    this.$root.toggleCursor('default');
                                    this.isPlaceOrderEnabled = true;
                                    this.paymentUrl = response.data.url;
                                    if (this.paymentForm.method === 'BAJAJ-FINANCE') {
                                        this.isPlaceOrderEnabled = false;
                                        // todo apply logic for bajaj finance by incrementing place order counter
                                    }
                                } else {
                                    throw response.data.message;
                                }
                            }).catch(error => {
                                this.$root.toggleCursor('default');
                                this.isPlaceOrderEnabled = false;
                                window.showAlert(`alert-danger`, '', error);
                            });
                        }
                    },
                    onSubmitStep1: function (obj) {
                        this.$root.toggleCursor('wait');
                        this.bfStep1IsProcessing = true;

                        for (const [key, value] of Object.entries(obj)) {
                            if (key !== 'rules') {
                                this.isValid(obj, key);
                            }
                        }

                        this.doValidateForm(obj).then(res => {
                            if (res.status) {
                                const _this = this;
                                _this.$http.post("{{ route('bajajFinance.search') }}", {cardNo: obj.cardNo}, {
                                    "Content-Type": "application/json"
                                }).then(function (response) {
                                    _this.$root.toggleCursor('default');
                                    _this.bfStep1IsProcessing = false;

                                    if (response.data.code == 200) {
                                        _this.toggleSteps('BFStep2');
                                        _this.bajajFinanceFinalObj['searchResponse'] = response.data.data.searchResponse;
                                        _this.bajajFinanceFinalObj['cardNo'] = obj.cardNo;
                                        _this.schemes = response.data.data.schemesResponse;
                                    } else {
                                        throw response.data.message
                                    }
                                }).catch(function (error) {
                                    console.error(error)
                                    window.showAlert(`alert-danger`, '', error);
                                    _this.$root.toggleCursor('default');
                                    _this.bfStep1IsProcessing = false;
                                });
                            } else {
                                this.$root.toggleCursor('default');
                                this.bfStep1IsProcessing = false;
                            }
                        }, error => {
                            console.error(error);
                            window.showAlert(`alert-danger`, '', error);
                            this.$root.toggleCursor('default');
                            this.bfStep1IsProcessing = false;
                        });
                    },
                    onSchemeSelect: function (selectedScheme) {
                        this.bajajFinanceFinalObj['selectedScheme'] = selectedScheme;
                        this.BFStep2_1 = true;
                    },
                    doGenerateOTP: function () {
                        try {
                            this.$root.toggleCursor('wait');
                            this.bfStep2_1IsProcessing = true;

                            const _this = this;
                            _this.$http.post("{{ route('bajajFinance.generate-otp') }}", _this.bajajFinanceFinalObj, {
                                "Content-Type": "application/json"
                            }).then(function (response) {
                                _this.$root.toggleCursor('default');
                                _this.bfStep2_1IsProcessing = false;

                                if (response.data.code == 200) {
                                    _this.bajajFinanceFinalObj['otpResponse'] = response.data.data.otpResponse;
                                    _this.toggleSteps('BFStep3');
                                    _this.BFStep3_1 = true;
                                } else {
                                    throw response.data.message
                                }
                            }).catch(function (error) {
                                console.error(error)
                                window.showAlert(`alert-danger`, '', error);
                                _this.$root.toggleCursor('default');
                                _this.bfStep2_1IsProcessing = false;
                            });
                        } catch (e) {
                            console.error(error)
                            window.showAlert(`alert-danger`, '', error);
                            this.$root.toggleCursor('default');
                            this.bfStep2_1IsProcessing = false;
                        }
                    },
                    doValidateOTP: function (obj) {
                        this.$root.toggleCursor('wait')
                        this.bfStep3IsProcessing = true;

                        for (const [key, value] of Object.entries(obj)) {
                            if (key !== 'rules') {
                                this.isValid(obj, key);
                            }
                        }

                        this.doValidateForm(obj).then(res => {
                            if (res.status) {
                                const _this = this;

                                let param = _this.bajajFinanceFinalObj;
                                param['otp'] = obj.otp;

                                _this.$http.post("{{ route('bajajFinance.validate-otp') }}", param, {
                                    "Content-Type": "application/json"
                                }).then(function (response) {
                                    _this.$root.toggleCursor('default')
                                    _this.bfStep3IsProcessing = false;

                                    if (response.data.code == 200) {
                                        _this.BFStep3_1 = false;
                                        /*_this.bajajFinanceFinalObj['authResponse'] = response.data.data.authResponse;*/
                                        _this.isPlaceOrderEnabled = true;
                                    } else {
                                        throw response.data.message
                                    }
                                }).catch(function (error) {
                                    console.error(error)
                                    window.showAlert(`alert-danger`, '', error);
                                    _this.$root.toggleCursor('default')
                                    _this.bfStep3IsProcessing = false;
                                });
                            } else {
                                this.$root.toggleCursor('default')
                                this.bfStep3IsProcessing = false;
                            }
                        }, error => {
                            console.error(error);
                            window.showAlert(`alert-danger`, '', error);
                            this.$root.toggleCursor('default')
                            this.bfStep3IsProcessing = false;
                        });
                    },
                    toggleTC: function () {
                        this.bfStep2_1IsProcessing = !this.bfStep2_1IsProcessing;
                    },
                    placeOrder: function () {
                        if (!this.addressForm.address_id || !this.paymentForm.method) {
                            // check address is set and payment is selected
                            this.validateAddressForm(this.addressForm)
                            return
                        }

                        if (
                            this.isPlaceOrderEnabled
                            && this.paymentUrl
                        ) {
                            this.isPlaceOrderEnabled = false;
                            window.location.href = this.paymentUrl;
                        }
                    },
                    toggleAddressPopUp: function () {
                        eventBus.$emit('TOGGLE_ADDRESS_POPUP', true);
                    },
                    shippingMethodSelected: function () {
                        this.isPlaceOrderEnabled = false;
                        this.$http.get("{{ route('shop.checkout.save-shipping') }}", {
                            params: this.shipping
                        }).then(response => {
                            if (response.data.code === 200) {
                                this.isPlaceOrderEnabled = true;
                            } else {
                                throw response.data.message;
                            }
                        }).catch(error => {
                            this.isPlaceOrderEnabled = false;
                            window.showAlert(`alert-danger`, '', error);
                        });
                    },
                    onEditAddress: function (address) {
                        this.toggleAddressPopUp();
                        eventBus.$emit('EDIT_ADDRESS', address);
                    },
                    deleteConfirmation: function (msg) {
                        if (!confirm(msg))
                            event.preventDefault();
                    }
                }
            });
        })()
    </script>
@endpush