<!-- SEO Meta Content -->
@push('meta')
<meta name="description" content="@lang('yas_theme::app.checkout.onepage.index.checkout')" />

<meta name="keywords" content="@lang('yas_theme::app.checkout.onepage.index.checkout')" />
@endPush

<x-yas_member::layouts :has-header="false" :has-feature="false" :has-footer="false">
    <!-- Page Title -->
    <x-slot:title>
        @lang('yas_theme::app.checkout.onepage.index.checkout')
        </x-slot>

        {!! view_render_event('bagisto.shop.checkout.onepage.header.before') !!}

        <!-- Page Header -->
        <div class="flex-wrap">
            <div class="flex w-full justify-between border border-b border-l-0 border-r-0 border-t-0 px-[60px] py-4 max-lg:px-8 max-sm:px-4">
                <div class="flex items-center gap-x-14 max-[1180px]:gap-x-9">
                    <a href="{{ route('yas_member.member.session.index') }}" class="flex min-h-[30px]" aria-label="@lang('yas_theme::checkout.onepage.index.bagisto')">
                        <img src="{{ core()->getCurrentChannel()->logo_url ?? bagisto_asset('images/logo.svg') }}" alt="{{ config('app.name') }}" width="131" height="29">
                    </a>
                </div>
            </div>
        </div>

        {!! view_render_event('bagisto.shop.checkout.onepage.header.after') !!}

        <!-- Page Content -->
        <div class="container px-[60px] max-lg:px-8 max-sm:px-4">

            {!! view_render_event('bagisto.shop.checkout.onepage.breadcrumbs.before') !!}

            <!-- Breadcrumbs -->
            @if ((core()->getConfigData('general.general.breadcrumbs.shop')))
            <x-yas_member::breadcrumbs name="member.checkout" />
            @endif

            {!! view_render_event('bagisto.shop.checkout.onepage.breadcrumbs.after') !!}

            <!-- Checkout Vue Component -->
            <v-checkout>
                <!-- Shimmer Effect -->
                <x-yas_member::shimmer.checkout.onepage />
            </v-checkout>
        </div>

        @pushOnce('scripts')
        <script type="text/x-template" id="v-checkout-template">
            <template v-if="! cart">
                <!-- Shimmer Effect -->
                <x-yas_member::shimmer.checkout.onepage />
            </template>

            <template v-else>
                <div class="grid grid-cols-[1fr_auto] gap-8 max-lg:grid-cols-[1fr] max-md:gap-5">
                    <!-- Included Checkout Summary Blade File For Mobile view -->
                    <div class="hidden max-md:block">
                        @include('yas_member::checkout.onepage.summary')
                    </div>

                    <div
                        class="overflow-y-auto max-md:grid max-md:gap-4"
                        id="steps-container"
                    >
                        <!-- Included Addresses Blade File -->
                        <template v-if="!cart.customer_id && ['customer', 'address', 'shipping', 'payment', 'review'].includes(currentStep)">
                            @include('yas_member::checkout.select_customer')
                        </template>

                        <template v-if="cart.customer_id && ['customer', 'address', 'shipping', 'payment', 'review'].includes(currentStep)">
                            @include('yas_member::checkout.onepage.address')
                        </template>

                        <!-- Included Shipping Methods Blade File -->
                        <template v-if="cart.have_stockable_items && ['shipping', 'payment', 'review'].includes(currentStep)">
                            @include('yas_member::checkout.onepage.shipping')
                        </template>

                        <!-- Included Payment Methods Blade File -->
                        <template v-if="['payment', 'review'].includes(currentStep)">
                            @include('yas_member::checkout.onepage.payment')
                        </template>
                    </div>

                    <!-- Included Checkout Summary Blade File For Desktop view -->
                    <div class="sticky top-8 block h-max w-[442px] max-w-full max-lg:w-auto max-lg:max-w-[442px] ltr:pl-8 max-lg:ltr:pl-0 rtl:pr-8 max-lg:rtl:pr-0">
                        <div class="block max-md:hidden">
                            @include('yas_member::checkout.onepage.summary')
                        </div>

                        <div
                            class="flex justify-end"
                            v-if="canPlaceOrder"
                        >
                            <template v-if="cart.payment_method == 'paypal_smart_button'">
                                {!! view_render_event('bagisto.shop.checkout.onepage.summary.paypal_smart_button.before') !!}

                                <!-- Paypal Smart Button Vue Component -->
                                <v-paypal-smart-button></v-paypal-smart-button>

                                {!! view_render_event('bagisto.shop.checkout.onepage.summary.paypal_smart_button.after') !!}
                            </template>

                            <template v-else>
                                <x-yas_member::button
                                    type="button"
                                    class="primary-button w-max px-11 py-3 max-md:mb-4 max-md:w-full max-md:max-w-full  max-sm:py-1.5"
                                    :title="trans('yas_theme::app.checkout.onepage.summary.place-order')"
                                    ::disabled="isPlacingOrder"
                                    ::loading="isPlacingOrder"
                                    @click="placeOrder"
                                />
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </script>

        <script type="module">
            app.component('v-checkout', {
                template: '#v-checkout-template',

                data() {
                    return {
                        cart: null,

                        displayTax: {
                            prices: "{{ core()->getConfigData('sales.taxes.shopping_cart.display_prices') }}",

                            subtotal: "{{ core()->getConfigData('sales.taxes.shopping_cart.display_subtotal') }}",

                            shipping: "{{ core()->getConfigData('sales.taxes.shopping_cart.display_shipping_amount') }}",
                        },

                        isPlacingOrder: false,

                        currentStep: 'customer',

                        shippingMethods: null,

                        paymentMethods: null,

                        canPlaceOrder: false,
                    }
                },

                mounted() {
                    this.getCart();
                },

                methods: {
                    getCart() {
                        this.$axios.get("{{ route('yas_member.checkout.onepage.summary') }}")
                            .then(response => {
                                this.cart = response.data.data;

                                this.scrollToCurrentStep();
                            })
                            .catch(error => {});
                    },

                    stepForward(step) {
                        this.currentStep = step;

                        if (step == 'review') {
                            this.canPlaceOrder = true;

                            return;
                        }

                        this.canPlaceOrder = false;

                        if (this.currentStep == 'shipping') {
                            this.shippingMethods = null;
                        } else if (this.currentStep == 'payment') {
                            this.paymentMethods = null;
                        }
                    },

                    stepProcessed(data) {
                        if (this.currentStep == 'shipping') {
                            this.shippingMethods = data;
                        } else if (this.currentStep == 'payment') {
                            this.paymentMethods = data;
                        }

                        this.getCart();
                    },

                    scrollToCurrentStep() {
                        let container = document.getElementById('steps-container');

                        if (!container) {
                            return;
                        }

                        container.scrollIntoView({
                            behavior: 'smooth',
                            block: 'end'
                        });
                    },

                    placeOrder() {
                        this.isPlacingOrder = true;

                        this.$axios.post("{{ route('yas_member.checkout.onepage.orders.store') }}")
                            .then(response => {
                                if (response.data.data.redirect) {
                                    window.location.href = response.data.data.redirect_url;
                                } else {
                                    window.location.href = "{{ route('yas_member.checkout.onepage.success') }}";
                                }

                                this.isPlacingOrder = false;
                            })
                            .catch(error => {
                                this.isPlacingOrder = false

                                this.$emitter.emit('add-flash', {
                                    type: 'error',
                                    message: error.response.data.message
                                });
                            });
                    }
                },
            });
        </script>
        @endPushOnce
</x-yas_member::layouts>