{{-- TODO: redirect from controller --}}
@if (core()->isCustomTheme())
    @if(in_array(core()->getCurrentChannel()->theme, ['muscle', 'pastry-bakery']))
        @include('shop::home.themes.muscle.body.cart.checkout')
    @elseif (in_array(core()->getCurrentChannel()->theme, ['green-land', 'pharmacies', 'medical-equipment', 'honey']))
        @include('shop::home.themes.green-land.body.cart.checkout')
    @else
        @include('shop::home.themes.sobkaha.body.cart.checkout')
    @endif
@else
@extends('shop::layouts.master')

@push('pageTitle')
    {{ __('shop::app.checkout.onepage.title') }}
@endpush

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

@push('scripts')
    <script type="text/javascript" src="@version('vendor/webkul/ui/assets/js/ui.js')"></script>

    @include('shop::checkout.cart.coupon')

    <script type="text/x-template" id="checkout-template">
        <div class="container">
            <div id="checkout" class="checkout-process row offset-lg-1 col-lg-11 col-md-12">
                <h1 class="col-12">{{ __('shop::app.checkout.onepage.place-order') }}</h1>

                <div class="col-lg-7 col-md-12">
                    <div class="step-content information" id="address-section">
                        @include('shop::checkout.onepage.customer-info')
                    </div>

                    <div
                        class="step-content shipping"
                        id="shipping-section"
                        v-if="showShippingSection">

                        <shipping-section
                            :key="shippingComponentKey"
                            @onShippingMethodSelected="shippingMethodSelected($event)"
                        ></shipping-section>
                    </div>

                    <div
                        class="step-content payment"
                        v-if="showPaymentSection"
                        id="payment-section">

                        <payment-section
                            @onPaymentMethodSelected="paymentMethodSelected($event)"
                        ></payment-section>

                        <coupon-component
                            @onApplyCoupon="getOrderSummary"
                            @onRemoveCoupon="getOrderSummary"
                        ></coupon-component>
                    </div>

                    <div
                        class="step-content comment"
                        v-if="showCommentSection"
                        id="comment-section">

                        <div class="control-group">
                            <h3 class="fw6 display-inbl"><label for="comment">{{ __('admin::app.sales.orders.comment') }}</label></h3>
                            <textarea v-validate="''" class="control new" id="comment" name="comment" data-vv-as="{{ __('admin::app.sales.orders.comment') }}" v-model="comment"></textarea>
                        </div>
                    </div>

                    <div
                        class="step-content review"
                        v-if="showSummarySection"
                        id="summary-section">

                        <review-section :key="reviewComponentKey">
                            <div slot="summary-section">
                                <summary-section
                                    discount="1"
                                    :key="summaryComponentKey"
                                    @onApplyCoupon="getOrderSummary"
                                    @onRemoveCoupon="getOrderSummary"
                                ></summary-section>

                            </div>
                            <div slot="place-order-btn">
                                <div class="mb20">
                                    <button
                                        type="button"
                                        class="theme-btn"
                                        @click="placeOrder()"
                                        :disabled="!isPlaceOrderEnabled"
                                        id="checkout-place-order-button">
                                        {{ __('shop::app.checkout.onepage.place-order') }}
                                    </button>
                                </div>
                            </div>
                        </review-section>

                    </div>
                </div>

                <div class="col-lg-4 col-md-12 offset-lg-1 order-summary-container top pt0">
                    <summary-section
                        :key="summaryComponentKey"
                    ></summary-section>

                    <div class="paypal-button-container mt10"></div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/javascript">
        (() => {
            var reviewHtml = '';
            var paymentHtml = '';
            var summaryHtml = '';
            var shippingHtml = '';
            var paymentMethods = '';
            var customerAddress = '';
            var shippingMethods = '';

            var reviewTemplateRenderFns = [];
            var paymentTemplateRenderFns = [];
            var summaryTemplateRenderFns = [];
            var shippingTemplateRenderFns = [];

            @auth('customer')
                @if(auth('customer')->user()->addresses)
                    customerAddress = @json(auth('customer')->user()->addresses);
                    customerAddress.email = "{{ auth('customer')->user()->email }}";
                    customerAddress.first_name = "{{ auth('customer')->user()->first_name }}";
                    customerAddress.last_name = "{{ auth('customer')->user()->last_name }}";
                @endif
            @endauth

            Vue.component('checkout', {
                template: '#checkout-template',
                inject: ['$validator'],

                data: function () {
                    return {
                        allAddress: {},
                        current_step: 1,
                        completed_step: 0,
                        isCheckPayment: true,
                        is_customer_exist: 0,
                        disable_button: false,
                        shippingComponentKey: 0,
                        reviewComponentKey: 0,
                        summaryComponentKey: 0,
                        showPaymentSection: false,
                        showCommentSection: false,
                        showSummarySection: false,
                        isPlaceOrderEnabled: false,
                        new_billing_address: false,
                        showShippingSection: false,
                        new_shipping_address: false,
                        selected_payment_method: '',
                        selected_shipping_method: '',
                        comment: '',
                        countries: [],
                        // countryStates: [],
                        isValidPhone: true,
                        countryHaveStates: false,

                        step_numbers: {
                            'information': 1,
                            'shipping': 2,
                            'payment': 3,
                            'review': 4
                        },

                        address: {
                            billing: {
                                address1: [''],
                                country: "{{ core()->countries(true)[0]->code }}",
                                city: '',
                                state: '',
                                save_as_address: false,
                                use_for_shipping: true,
                            },

                            shipping: {
                                address1: [''],
                                country: "{{ core()->countries(true)[0]->code }}",
                                city: '',
                                state: '',
                            },
                        },

                        countryStates: @json(core()->groupedStatesByCountries()),

                    stateCities: @json(core()->groupedCitiesByStates()),
                }
                },

                created: function () {
                    // this.fetchCountries();
                    this.fetchCountryStates();
                    this.fetchStateCities();
                    this.getOrderSummary();
                    this.initializeIntlTelInput('phone', 'billing-address-continue');
                    this.initializeIntlTelInput('shippingphone', 'shipping-address-continue');



                    if (! customerAddress) {
                        this.new_shipping_address = true;
                        this.new_billing_address = true;
                    } else {
                        this.address.billing.first_name = this.address.shipping.first_name = customerAddress.first_name;
                        this.address.billing.last_name = this.address.shipping.last_name = customerAddress.last_name;
                        this.address.billing.email = this.address.shipping.email = customerAddress.email;

                        if (customerAddress.length < 1) {
                            this.new_shipping_address = true;
                            this.new_billing_address = true;
                        } else {
                            this.allAddress = customerAddress;

                            for (let country in this.countries) {
                                for (let code in this.allAddress) {
                                    if (this.allAddress[code].country) {
                                        if (this.allAddress[code].country == this.countries[country].code) {
                                            this.allAddress[code]['country'] = this.countries[country].name;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    // when there is only one City selected then update the distric select options accordingly for billing address
                    if(this.countryStates[this.address.billing.country].length == 1 && this.countryStates[this.address.billing.country].length > 0){
                        this.address.billing.state = this.countryStates[this.address.billing.country][0].id;
                    }

                    // when there is only one City selected then update the distric select options accordingly for shipping address
                    if(this.countryStates[this.address.shipping.country].length == 1 && this.countryStates[this.address.shipping.country].length > 0){
                        this.address.shipping.state = this.countryStates[this.address.shipping.country][0].id;
                    }

                    // when there is only one distric selected for shipping address
                    if(this.stateCities[this.address.shipping.state].length == 1 && this.stateCities[this.address.shipping.state].length > 0){
                        this.address.shipping.city = this.stateCities[this.address.shipping.state][0].id;
                    }

                    // when there is only one distric selected for billing address
                    if(this.stateCities[this.address.billing.state].length == 1 && this.stateCities[this.address.billing.state].length > 0){
                        this.address.billing.city = this.stateCities[this.address.billing.state][0].id;
                    }
                },

                methods: {
                    navigateToStep: function (step) {
                        if (step <= this.completed_step) {
                            this.current_step = step;
                            this.completed_step = step - 1;
                        }
                    },

                    fetchCountryStates: function () {
                        this.countryStates = @json(core()->groupedStatesByCountries('checkBranch'));
                    },

                    fetchStateCities: function () {
                        this.stateCities = @json(core()->groupedCitiesByStatesId('checkBranch'));
                    },

                    haveStates: function (addressType) {
                        if (this.countryStates[this.address[addressType].country] && this.countryStates[this.address[addressType].country].length)
                            return true;

                        return false;
                    },

                    haveCities:function (addressType) {
                        if(this.stateCities[this.address[addressType].city] && this.stateCities[this.address[addressType].city])
                            return true;

                        return false;
                    },

                    validateForm: async function (scope) {
                        var isManualValidationFail = false;

                        if (scope == 'address-form') {
                            isManualValidationFail = this.validateAddressForm();
                        }

                        if (! isManualValidationFail) {
                            await this.$validator.validateAll(scope)
                                .then(result => {
                                    if (result && this.isValidPhone) {
                                        // Access the isValid variable here
                                        switch (scope) {
                                            case 'address-form':
                                                /* loader will activate only when save as address is clicked */
                                                if (this.address.billing.save_as_address) {
                                                    // this.$root.showLoader();
                                                }

                                                /* this is outside because save as address also calling for
                                                saving the address in the order only */
                                                this.saveAddress();
                                                break;

                                            case 'shipping-form':
                                                if (this.showShippingSection) {
                                                    this.$root.showLoader();
                                                    this.saveShipping();
                                                    break;
                                                }

                                            case 'payment-form':
                                                this.$root.showLoader();
                                                this.savePayment();

                                                this.isPlaceOrderEnabled = ! this.validateAddressForm();
                                                break;

                                            default:
                                                break;
                                        }

                                    } else {
                                        this.isPlaceOrderEnabled = false;
                                    }
                                });
                        } else {
                            this.isPlaceOrderEnabled = false;
                        }
                    },

                    validateAddressForm: function () {
                        var isManualValidationFail = false;

                        let form = $(document).find('form[data-vv-scope=address-form]');

                        // validate that if all the field contains some value
                        if (form) {
                            form.find(':input').each((index, element) => {
                                let value = $(element).val();
                                let elementId = element.id;

                                if (value == ""
                                    && element.id != 'sign-btn'
                                    && element.id != 'billing[company_name]'
                                    && element.id != 'shipping[company_name]'
                                    && element.id != 'billing[postcode]'
                                    && element.id != 'shipping[postcode]'
                                ) {                                    // check for multiple line address
                                    if (elementId.match('billing_address_') || elementId.match('shipping_address_')) {
                                        // only first line address is required
                                        if (elementId == 'billing_address_0' || elementId == 'shipping_address_0') {
                                            isManualValidationFail = true;
                                        }
                                    } else {
                                        isManualValidationFail = true;
                                    }
                                }
                            });
                        }

                        // validate that if customer wants to use different shipping address
                        if (! this.address.billing.use_for_shipping) {
                            if (! this.address.shipping.address_id && ! this.new_shipping_address) {
                                isManualValidationFail = true;
                            }
                        }

                        return isManualValidationFail;
                    },

                    isCustomerExist: function() {
                        this.$validator.attach('address-form.billing[email]', 'required|email');

                        this.$validator.validate('address-form.billing[email]', this.address.billing.email)
                            .then(isValid => {
                                if (! isValid)
                                    return;

                                this.$http.post("{{ route('customer.checkout.exist') }}", {email: this.address.billing.email})
                                    .then(response => {
                                        this.is_customer_exist = response.data ? 1 : 0;

                                        if (response.data)
                                            this.$root.hideLoader();
                                    })
                                    .catch(function (error) {})
                            })
                            .catch(error => {})
                    },

                    loginCustomer: function () {
                        this.$http.post("{{ route('customer.checkout.login') }}", {
                            email: this.address.billing.email,
                            password: this.address.billing.password
                        })
                            .then(response => {
                                if (response.data.success) {
                                    window.location.href = "{{ route('shop.checkout.onepage.index') }}";
                                } else {
                                    window.showAlert(`alert-danger`, this.__('shop.general.alert.danger'), response.data.error);
                                }
                            })
                            .catch(function (error) {})
                    },

                    getOrderSummary: function () {
                        this.$http.get("{{ route('shop.checkout.summary') }}")
                            .then(response => {
                                summaryHtml = Vue.compile(response.data.html)

                                this.summaryComponentKey++;
                                this.reviewComponentKey++;
                            })
                            .catch(function (error) {})
                    },

                    useForShippingChanged: async function () {
                        // this.$root.showLoader();
                        this.showShippingSection = false;
                        this.initializeIntlTelInput('shippingphone', 'shipping-address-continue');
                    },

                    showLoader: async function () {
                        this.$root.showLoader();
                    },

                    saveAddress: async function () {

                        this.disable_button = true;

                        if (this.allAddress.length > 0) {
                            let address = this.allAddress.forEach(address => {
                                if (address.id == this.address.billing.address_id) {
                                    this.address.billing.address1 = [address.address1];

                                    if (address.email) {
                                        this.address.billing.email = address.email;
                                    }

                                    if (address.first_name) {
                                        this.address.billing.first_name = address.first_name;
                                    }

                                    if (address.last_name) {
                                        this.address.billing.last_name = address.last_name;
                                    }
                                }

                                if (address.id == this.address.shipping.address_id) {
                                    this.address.shipping.address1 = [address.address1];

                                    if (address.email) {
                                        this.address.shipping.email = address.email;
                                    }

                                    if (address.first_name) {
                                        this.address.shipping.first_name = address.first_name;
                                    }

                                    if (address.last_name) {
                                        this.address.shipping.last_name = address.last_name;
                                    }
                                }
                            });
                        }

                        this.$http.post("{{ route('shop.checkout.save-address') }}", this.address)
                            .then(response => {
                                this.disable_button = false;
                                this.isPlaceOrderEnabled = true;

                                if (this.step_numbers[response.data.jump_to_section] == 2) {
                                    this.showShippingSection = true;
                                    shippingHtml = Vue.compile(response.data.html);
                                } else {
                                    paymentHtml = Vue.compile(response.data.html)
                                }

                                this.completed_step = this.step_numbers[response.data.jump_to_section] + 1;
                                this.current_step = this.step_numbers[response.data.jump_to_section];

                                if (response.data.jump_to_section == "payment") {
                                    this.showPaymentSection = true;
                                    paymentMethods  = response.data.paymentMethods;
                                }

                                shippingMethods = response.data.shippingMethods;

                                this.shippingComponentKey++;

                                this.getOrderSummary();

                                this.$root.hideLoader();
                            })
                            .catch(error => {
                                this.disable_button = false;
                                this.$root.hideLoader();

                                this.handleErrorResponse(error.response, 'address-form')
                            })
                    },

                    saveShipping: async function () {
                        this.disable_button = true;

                        this.$http.post("{{ route('shop.checkout.save-shipping') }}", {'shipping_method': this.selected_shipping_method})
                            .then(response => {
                                this.$root.hideLoader();
                                this.disable_button = false;
                                this.showPaymentSection = true;

                                paymentHtml = Vue.compile(response.data.html)

                                this.completed_step = this.step_numbers[response.data.jump_to_section] + 1;

                                this.current_step = this.step_numbers[response.data.jump_to_section];

                                paymentMethods = response.data.paymentMethods;

                                if (this.selected_payment_method) {
                                    this.savePayment();
                                }

                                this.getOrderSummary();
                            })
                            .catch(error => {
                                this.disable_button = false;
                                this.$root.hideLoader();
                                this.handleErrorResponse(error.response, 'shipping-form')
                            })
                    },

                    savePayment: async function () {
                        this.disable_button = true;

                        if (this.isCheckPayment) {
                            this.isCheckPayment = false;

                            this.$http.post("{{ route('shop.checkout.save-payment') }}", {'payment': this.selected_payment_method})
                                .then(response => {
                                    this.isCheckPayment = true;
                                    this.disable_button = false;

                                    this.showCommentSection = true;
                                    this.showSummarySection = true;
                                    this.$root.hideLoader();

                                    reviewHtml = Vue.compile(response.data.html)
                                    this.completed_step = this.step_numbers[response.data.jump_to_section] + 1;
                                    this.current_step = this.step_numbers[response.data.jump_to_section];

                                    document.body.style.cursor = 'auto';

                                    this.getOrderSummary();
                                })
                                .catch(error => {
                                    this.disable_button = false;
                                    this.$root.hideLoader();
                                    this.handleErrorResponse(error.response, 'payment-form')
                                });
                        }
                    },

                    placeOrder: async function () {
                        if (this.isPlaceOrderEnabled) {
                            this.disable_button = false;
                            this.isPlaceOrderEnabled = false;

                            this.$root.showLoader();

                            this.$http.post("{{ route('shop.checkout.save-order') }}", {'_token': "{{ csrf_token() }}", 'comment': this.comment})
                                .then(response => {
                                    if (response.data.success) {
                                        if (response.data.redirect_url) {
                                            this.$root.hideLoader();
                                            window.location.href = response.data.redirect_url;
                                        } else {
                                            this.$root.hideLoader();
                                            window.location.href = "{{ route('shop.checkout.success') }}";
                                        }
                                    }
                                })
                                .catch(error => {
                                    this.disable_button = true;
                                    this.$root.hideLoader();

                                    window.showAlert(`alert-danger`, this.__('shop.general.alert.danger'), "{{ __('shop::app.common.error') }}");
                                })
                        } else {
                            this.disable_button = true;
                        }
                    },

                    handleErrorResponse: function (response, scope) {
                        if (response.status == 422) {
                            serverErrors = response.data.errors;
                            this.$root.addServerErrors(scope)
                        } else if (response.status == 403) {
                            if (response.data.redirect_url) {
                                window.location.href = response.data.redirect_url;
                            }
                        }
                    },

                    shippingMethodSelected: function (shippingMethod) {
                        this.selected_shipping_method = shippingMethod;
                    },

                    paymentMethodSelected: function (paymentMethod) {
                        this.selected_payment_method = paymentMethod;
                    },

                    initializeIntlTelInput: function (refId, btn) {
                        self = this;

                        setTimeout(() => {
                            var input = document.querySelector(`#${refId}`);
                            window.intlTelInput(input, {
                                allowDropdown:true,
                                onlyCountries: ["{{ core()->countries(true)[0]->code }}"],
                                separateDialCode: true,
                                customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
                                    return selectedCountryPlaceholder.replace(/\s/g, '');
                                }
                            });
                            window.intlTelInputGlobals.getInstance(input).setCountry("{{ core()->countries(true)[0]->code }}");

                            $(`#${refId}`).on('keyup', function(e) {
                                // Prevent submit
                                e.preventDefault();

                                // Remove existing span if it exists
                                if ($('#itiVerification').length > 0) {
                                    $('#itiVerification').remove();
                                }

                                var iti = window.intlTelInputGlobals.getInstance(input);
                                var isValid = iti.isValidNumber(); // Check if the phone number is valid

                                if($('#phone').val().length > 1 ){
                                    if (isValid) {
                                        self.isValidPhone = true;
                                        var countryCode = iti.getSelectedCountryData().dialCode;
                                        var tel         = document.getElementById('phone').value;

                                        // click on continue btn
                                        $(`#${btn}`).prop('disabled', false);
                                        $(`#${btn}`).css('cursor', 'pointer');
                                    } else {
                                        self.isValidPhone = false;

                                        var spanElement = $('<span>', {
                                            id: 'itiVerification',
                                            class: 'control-error',
                                            text: '{{ __("saas::app.tenant.registration.invalid-phone") }}'
                                        });

                                        // Append the span element to the parent of the input element
                                        $(input).closest('.form-field').append(spanElement);
                                        spanElement.show();

                                        // click on continue btn
                                        $(`#${btn}`).prop('disabled', true);
                                        $(`#${btn}`).css('cursor', 'not-allowed');
                                    }
                                }
                            });
                        }, 0);
                    },

                    newBillingAddress: function () {
                        this.new_billing_address = true;
                        this.isPlaceOrderEnabled = false;
                        this.address.billing.address_id = null;
                        this.initializeIntlTelInput('phone', 'billing-address-continue');
                    },

                    newShippingAddress: function () {
                        this.new_shipping_address = true;
                        this.isPlaceOrderEnabled = false;
                        this.address.shipping.address_id = null;
                        this.initializeIntlTelInput('shippingphone', 'shipping-address-continue');
                    },

                    backToSavedBillingAddress: function () {
                        this.new_billing_address = false;
                        this.validateFormAfterAction()
                    },

                    backToSavedShippingAddress: function () {
                        this.new_shipping_address = false;
                        $('.shipping-address-info .iti.iti--allow-dropdown').remove();
                        this.validateFormAfterAction()
                    },

                    validateFormAfterAction: function () {
                        setTimeout(() => {
                            this.validateForm('address-form');
                        }, 0);
                    }
                },
            });

            Vue.component('shipping-section', {
                inject: ['$validator'],

                data: function () {
                    return {
                        templateRender: null,

                        selected_shipping_method: '',

                        first_iteration : true,
                    }
                },

                staticRenderFns: shippingTemplateRenderFns,

                mounted: function () {
                    this.templateRender = shippingHtml.render;

                    for (var i in shippingHtml.staticRenderFns) {
                        shippingTemplateRenderFns.push(shippingHtml.staticRenderFns[i]);
                    }

                    const element = document.getElementById("shipping-section");
                    element.scrollIntoView({ behavior: "smooth" });

                    eventBus.$emit('after-checkout-shipping-section-added');
                },

                render: function (h) {
                    return h('div', [
                        (this.templateRender ?
                            this.templateRender() :
                            '')
                    ]);
                },

                methods: {
                    methodSelected: function () {
                        this.$parent.validateForm('shipping-form');

                        this.$emit('onShippingMethodSelected', this.selected_shipping_method)

                        eventBus.$emit('after-shipping-method-selected', this.selected_shipping_method);
                    }
                }
            })

            Vue.component('payment-section', {
                inject: ['$validator'],

                data: function () {
                    return {
                        templateRender: null,

                        payment: {
                            method: ""
                        },

                        first_iteration : true,
                    }
                },

                staticRenderFns: paymentTemplateRenderFns,

                mounted: function () {
                    this.templateRender = paymentHtml.render;

                    for (var i in paymentHtml.staticRenderFns) {
                        paymentTemplateRenderFns.push(paymentHtml.staticRenderFns[i]);
                    }

                    const element = document.getElementById("payment-section");
                    element.scrollIntoView({ behavior: "smooth" });

                    eventBus.$emit('after-checkout-payment-section-added');
                },

                render: function (h) {
                    return h('div', [
                        (this.templateRender ?
                            this.templateRender() :
                            '')
                    ]);
                },

                methods: {
                    methodSelected: function () {
                        this.$parent.validateForm('payment-form');

                        this.$emit('onPaymentMethodSelected', this.payment)

                        eventBus.$emit('after-payment-method-selected', this.payment);
                    }
                }
            })

            Vue.component('review-section', {
                data: function () {
                    return {
                        error_message: '',
                        templateRender: null,
                    }
                },

                staticRenderFns: reviewTemplateRenderFns,

                render: function (h) {
                    return h(
                        'div', [
                            this.templateRender ? this.templateRender() : ''
                        ]
                    );
                },

                mounted: function () {
                    this.templateRender = reviewHtml.render;

                    for (var i in reviewHtml.staticRenderFns) {
                        reviewTemplateRenderFns[i] = reviewHtml.staticRenderFns[i];
                    }

                    const element = document.getElementById("summary-section");
                    element.scrollIntoView({ behavior: "smooth" });

                    this.$forceUpdate();
                }
            });

            // Vue.component('review-section', {
            //     data: function () {
            //         return {
            //             error_message: '',
            //             templateRender: null,
            //         }
            //     },

            //     staticRenderFns: reviewTemplateRenderFns,

            //     render: function (h) {
            //         return h(
            //             'div', [
            //                 this.templateRender ? this.templateRender() : ''
            //             ]
            //         );
            //     },

            //     mounted: function () {
            //         this.templateRender = reviewHtml.render;

            //         for (var i in reviewHtml.staticRenderFns) {
            //             reviewTemplateRenderFns[i] = reviewHtml.staticRenderFns[i];
            //         }

            //         const element = document.getElementById("summary-section");
            //         element.scrollIntoView({ behavior: "smooth" });

            //         this.$forceUpdate();
            //     }
            // });

            Vue.component('summary-section', {
                inject: ['$validator'],

                staticRenderFns: summaryTemplateRenderFns,

                props: {
                    discount: {
                        default: 0,
                        type: [String, Number],
                    }
                },

                data: function () {
                    return {
                        changeCount: 0,
                        coupon_code: null,
                        error_message: null,
                        templateRender: null,
                        couponChanged: false,
                    }
                },

                mounted: function () {
                    this.templateRender = summaryHtml.render;

                    for (var i in summaryHtml.staticRenderFns) {
                        summaryTemplateRenderFns[i] = summaryHtml.staticRenderFns[i];
                    }

                    const element = document.getElementById("comment-section");
                    element.scrollIntoView({ behavior: "smooth" });

                    this.$forceUpdate();
                },

                render: function (h) {
                    return h('div', [
                        (this.templateRender ?
                            this.templateRender() :
                            '')
                    ]);
                },

                methods: {
                    onSubmit: function () {
                        var this_this = this;
                        const emptyCouponErrorText = "Please enter a coupon code";
                    },

                    changeCoupon: function () {
                        if (this.couponChanged == true && this.changeCount == 0) {
                            this.changeCount++;

                            this.error_message = null;

                            this.couponChanged = false;
                        } else {
                            this.changeCount = 0;
                        }
                    },
                }
            });

        })();
    </script>
@endpush
@endif