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

@section('page_title')
    {{ __('shop::app.checkout.cart.title') }}
@stop
@push('css')
<link rel="stylesheet" href="{{bagisto_asset('styles/cart.css')}}" />
@endpush
@section('content-wrapper')
    <section class="breadcrumb">
        <div class="container">
            <div class="breadcrumb-container">
                <ul class="breadcrumb">
                    <li><a href="/">{{__('shop::app.home.page-title')}}</a></li>
                    <li><a href="#" class="current">{{__('shop::app.checkout.cart.title')}}</a></li>
                </ul>
            </div>
        </div>
    </section>
<main class="cart-content container @if(!$cart) empty @endif">
    @if(!empty($cart))
    <cart></cart>
    @else
    <div class="empty_icon">
        <img src="{{bagisto_asset('icons/cart-empty.svg')}}" alt="empty cart">
    </div>
    <h2>{{__('shop::app.checkout.cart.empty')}}</h2>
    @endif
</main>
<!-- CART CONTENT end ================================================================== -->

@endsection

@push('scripts')
    @include('shop::checkout.cart.coupon')
    @if(!empty($cart))
    <script type="text/x-template" id="cart-template">
        <div class="cart-content-inner">
            <div class="cart-content-title">
                <h2 class="item-section-title-text">{{__('shop::app.checkout.cart.title')}} ({{ intval($cart->items_qty) }})</h2>
            </div>
            <div class="horizontal"></div>
            <div class="item-showcase" >
                <form class="left-side" action="{{ route('shop.checkout.cart.update') }}" method="POST" ref="cartForm">
                    @foreach ($cart->items as $key => $item)
                        @php
                            $productBaseImage = $item->product->getTypeInstance()->getBaseImage($item);

                            if (is_null ($item->product->url_key)) {
                                if (! is_null($item->product->parent)) {
                                    $url_key = $item->product->parent->url_key;
                                }
                            } else {
                                $url_key = $item->product->url_key;
                            }
                        @endphp

                        <div class="item-container">
                            <div class="item-img">
                                <a href="{{ route('shop.productOrCategory.index', $url_key) }}">
                                    <img src="{{ $productBaseImage['small_image_url'] }}">
                                </a>
                            </div>
                            <div class="item-description">
                                <div class="desc-top">
                                    @auth('customer')
                                        @if (core()->getConfigData('general.content.shop.wishlist_option') == "1")

                                            @if ($item->parent_id != 'null' ||$item->parent_id != null)
                                                <a  href="javascript:void(0);"
                                                    onclick="moveToWishlist('{{ __('shop::app.checkout.cart.cart-remove-action') }}', '{{ route('shop.movetowishlist', $item->id) }}')" class="fav-link desc-link">
                                                    <div class="fav-wrapper desc-wrapper">
                                                        <img src="{{bagisto_asset('icons/icon (love).svg') }}" alt="love">
                                                    </div>
                                                    <span class="fav-text desc-text">{{__('shop::app.customer.account.wishlist.add-wishlist-text')}}</span>
                                                </a>
                                            @else
                                                <a  href="javascript:void(0);"
                                                    onclick="moveToWishlist('{{ __('shop::app.checkout.cart.cart-remove-action') }}', '{{ route('shop.movetowishlist', $item->child->id) }}')" class="fav-link desc-link">
                                                    <div class="fav-wrapper desc-wrapper">
                                                        <img src="{{bagisto_asset('icons/icon (love).svg') }}" alt="love">
                                                    </div>
                                                    <span class="fav-text desc-text">{{__('shop::app.customer.account.wishliest.add-wishlist-text')}}</span>
                                                </a>
                                            @endif

                                        @endif
                                    @endauth
                                    <a href="{{ route('shop.checkout.cart.remove', $item->id) }}"
                                       onclick="removeLink('{{ __('shop::app.checkout.cart.cart-remove-action') }}')" class="remove-link desc-link">
                                        <div class="remove-wrapper desc-wrapper">
                                            <img src="{{bagisto_asset('icons/trash.svg') }}" alt="remove">
                                        </div>
                                        <span class="remove-text desc-text">{{__('shop::app.common.delete')}}</span>
                                    </a>
                                </div>

                                <div class="desc-mid">
                                    <a href="{{ route('shop.productOrCategory.index', $url_key) }}">
                                        <h2 class="item-name" >{{ $item->name }}</h2>
                                    </a>
                                </div>
                                @if (isset($item->additional['attributes']))
                                    <div class="item-options">

                                        @foreach ($item->additional['attributes'] as $attribute)
                                            <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
                                        @endforeach

                                    </div>
                                @endif
                            </div>
                            <div class="item-price">
                                <div class="item-price-wrapper">

                                    <span class="new-price">{{ core()->currency($item->base_price) }}</span>
                                </div>

                                @if ($item->product->getTypeInstance()->showQuantityBox() === true)
                                    <quantity-changer
                                        :control-name="'qty[{{$item->id}}]'"
                                        quantity="{{$item->quantity}}"
                                        @onQtyUpdated="qtyUpdated({{$item->quantity}})"
                                    >
                                    </quantity-changer>
                                @endif

                            </div>
                        </div>
                        @if (! cart()->isItemHaveQuantity($item))
                            <div class="error-message mt-15">
                                * {{ __('shop::app.checkout.cart.quantity-error') }}
                            </div>
                        @endif
                        <div class="horizontal"></div>

                    @endforeach
                    @csrf

                </form>
                <div class="right-side">
                    @if (! cart()->hasError())
                        @include('shop::checkout.total.summary', ['cart' => $cart])
                        @php
                            $minimumOrderAmount = (float) core()->getConfigData('sales.orderSettings.minimum-order.minimum_order_amount') ?? 0;
                        @endphp
                        <proceed-to-checkout
                            href="{{ route('shop.checkout.onepage.index') }}"
                            add-class="checkout-button"
                            text="{{ __('shop::app.checkout.cart.proceed-to-checkout') }}"
                            is-minimum-order-completed="{{ $cart->checkMinimumOrder() }}"
                            minimum-order-message="{{ __('shop::app.checkout.cart.minimum-order-message', ['amount' => core()->currency($minimumOrderAmount)]) }}">
                        </proceed-to-checkout>
                    @endif

                </div>
            </div>
        </div>
    </script>
    @endif
    <script type="text/x-template" id="quantity-changer-template">

        <div class="quantity-wrapper control-group" :class="[errors.has(controlName) ? 'has-error' : '']">

            <button type="button" class="subtract" @click="decreaseQty()">-</button>

            <input :name="controlName" ref="quantityChanger" class="quantity" :value="qty" v-validate="'required|numeric|min_value:1'" data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;" readonly>

            <button type="button" class="add" @click="increaseQty()">+</button>

            <span class="control-error" v-if="errors.has(controlName)">@{{ errors.first(controlName) }}</span>
        </div>
    </script>
    <script>
        Vue.component('cart',{
           template:'#cart-template',
           props:{},
           methods:{
               qtyUpdated: function(qty) {
                   // console.warn(this.$refs)
                   this.$refs.cartForm.submit();
               }
           }
        });
        Vue.component('quantity-changer', {
            template: '#quantity-changer-template',

            inject: ['$validator'],

            props: {
                controlName: {
                    type: String,
                    default: 'quantity'
                },

                quantity: {
                    type: [Number, String],
                    default: 1
                },
                minQuantity: {
                    type: [Number, String],
                    default: 1
                },

                validations: {
                    type: String,
                    default: 'required|numeric|min_value:1'
                }
            },

            data: function() {
                return {
                    qty: this.quantity
                }
            },
            mounted: function() {
                this.$refs.quantityChanger.value = this.qty > this.minQuantity
                    ? this.qty
                    : this.minQuantity;
            },
            watch: {
                qty: function (val) {
                    // console.warn(this.$refs)
                    this.$refs.quantityChanger.value = ! isNaN(parseFloat(val)) ? val : 0;

                    this.qty = ! isNaN(parseFloat(val)) ? this.qty : 0;

                    this.$emit('onQtyUpdated', this.qty);

                    this.$validator.validate();
                    // this.$refs.cartForm.submit();
                }
            },

            methods: {
                decreaseQty: function() {
                    if (this.qty > 1)
                        this.qty = parseInt(this.qty) - 1;

                    // this.$emit('onQtyUpdated', this.qty)
                },

                increaseQty: function() {
                    this.qty = parseInt(this.qty) + 1;

                    // this.$emit('onQtyUpdated', this.qty)
                }

            }
        });

        function removeLink(message) {
            if (! confirm(message)) {
                event.preventDefault();
                return;
            }
        }

        function moveToWishlist(message, route) {
            if (! confirm(message)) {
                event.preventDefault();
                return;
            }

            axios.post(route, {'redirect': false})
                .then((response) => {
                    location.reload();
                });
        }

        function updateCartQunatity(operation, index) {
            var quantity = document.getElementById('cart-quantity'+index).value;

            if (operation == 'add') {
                quantity = parseInt(quantity) + 1;
            } else if (operation == 'remove') {
                if (quantity > 1) {
                    quantity = parseInt(quantity) - 1;
                } else {
                    alert('{{ __('shop::app.products.less-quantity') }}');
                }
            }
            document.getElementById('cart-quantity'+index).value = quantity;
            event.preventDefault();
        }
    </script>
@endpush