@extends('layouts.admin.app')
@section('title') Edit @stop
@section('main')
    <div id="app">

        {!! Form::open(['method'=>'PUT','action' => ['AdminOrdersController@invoicerCartUpdate', $order->id], 'class'=>'form-horizontal','@keydown.enter.prevent', 'autocomplete'=>'off']) !!}

        <div class="box box-info">
            <div class="box-body">
                <h4 class="text-center">CART</h4>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="row">
                            <div class="col-sm-3 text-center">
                                {!! Form::label('selected_quantity','Quantity:') !!}
                                {!! Form::number('selected_quantity', null, ['class'=>'form-control','v-model'=>'cartItem.quantity', 'ref'=>'quantity','@keydown.enter.prevent'=>'addToCart(cartItem)']) !!}
                            </div>
                            <div class="col-sm-6 text-center">
                                {!! Form::label('product','Select Product Number:') !!}
                                <select v-model="cartItem.product" class="form-control" id="product"
                                        @keydown.enter.prevent="addToCart(cartItem)">
                                    <option v-for="product in products" v-bind:value="product">@{{ product.sku + ' | ' +
                                        product.name }}
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-3 text-center">
                                {!! Form::label('product','Enter') !!}
                                {!! Form::button('Add to Cart', ['class'=>'btn btn-primary btn-block','@click.prevent'=>'addToCart(cartItem)','@keydown.enter.prevent'=>'addToCart(cartItem)','@keydown.tab.prevent'=>'back']) !!}
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-bordered text-center">
                                    <thead>
                                    <tr>
                                        <th style="width: 80px;">QTY</th>
                                        <th style="width: 80px;">SKU</th>
                                        <th>NAME</th>
                                        <th style="width: 90px;">PRICE</th>
                                        <th style="width: 100px;">SUBTOTAL</th>
                                        <th style="width: 80px;">REMOVE</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in cart">
                                        <td>@{{ item.qty }}</td>
                                        <td>@{{ item.options.sku }}</td>
                                        <td>@{{ item.name }}</td>
                                        <td>$ @{{ item.price | formatCurrency }}</td>
                                        <td>$ @{{ item.subtotal | formatCurrency }}</td>
                                        <td>
                                            <a style="cursor: pointer;" @click.prevent="removeCartItem(index)">
                                                <i aria-hidden="true" class="fa fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" style="text-align: right;"><strong>TOTAL</strong></td>
                                        <td colspan="3"><strong>$ @{{ Total | formatCurrency }}</strong></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <textarea class="hidden" name="cart">@{{ cart }}</textarea>
        <input class="hidden" type="text" name="total" :value="Total">
        {!! Form::submit('Update Cart', ['class'=>'btn btn-primary btn-block']) !!}
        {!! Form::close() !!}
    </div>
@stop
@section('footer')
    <script>
        $.notifyDefaults({
            type: 'danger',
            allow_dismiss: false
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        function formatNumber(n, c, d, t) {
            var c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d === undefined ? '.' : d,
                t = t === undefined ? ',' : t,
                s = n < 0 ? '-' : '',
                i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
                j = (j = i.length) > 3 ? j % 3 : 0;
            return s + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : '');
        };

        Vue.filter('formatCurrency', function (value) {
            return formatNumber(value, 2, '.', ',');
        });
        var app = new Vue({
            el: '#app',
            data: {
                cart: [],
                cartItem: {
                    product: {},
                    total: '',
                    quantity: '',
                },
                products: [],
            },
            methods: {
                back: function () {
                    this.$refs.quantity.focus();
                },
                addToCart: function (itemToAdd) {
                    var found = false;
                    var self = this;

                    if (itemToAdd.quantity == '') {

                        $.notify({
                            icon: 'glyphicon glyphicon-remove',
                            message: 'Please Enter Quantity',
                        }, {
                            delay: 2000
                        });
                        return;
                    }

                    if (itemToAdd.quantity <= 0) {

                        $.notify({
                            icon: 'glyphicon glyphicon-remove',
                            message: 'Quantity cannot be equal or less than Zero',
                        }, {
                            delay: 2000
                        });
                        return;
                    }

                    if (Object.keys(this.cartItem.product).length === 0) {
                        $.notify({
                            icon: 'glyphicon glyphicon-remove',
                            message: 'Please Select Product',
                        }, {
                            delay: 2000
                        });
                        return;
                    }

                    this.cart.forEach(function (item) {
                        if (item.id === itemToAdd.product.id) {
                            found = true;
                            self.$refs.quantity.focus();
                            self.cartItem = {
                                product: {},
                                total: '',
                                quantity: '',
                            };
                            $.notify({
                                icon: 'glyphicon glyphicon-remove',
                                message: 'That product is already in the cart.',
                            }, {
                                delay: 2000
                            });
                            return;
                        }
                    });

                    if (found === false) {

                                @if($order['order_type'] == '1')
                        var newcart = {
                                id: itemToAdd.product.id,
                                name: itemToAdd.product.name,
                                qty: itemToAdd.quantity,
                                price: itemToAdd.product.price_zone1,
                                options: {
                                    sku: itemToAdd.product.sku,
                                },
                                subtotal: itemToAdd.quantity * itemToAdd.product.price_zone1
                            };
                                @elseif($order['order_type'] == '2')
                        var newcart = {
                                id: itemToAdd.product.id,
                                name: itemToAdd.product.name,
                                qty: itemToAdd.quantity,
                                price: itemToAdd.product.price_zone2,
                                options: {
                                    sku: itemToAdd.product.sku,
                                },
                                subtotal: itemToAdd.quantity * itemToAdd.product.price_zone2
                            };
                                @else
                        var newcart = {
                                id: itemToAdd.product.id,
                                name: itemToAdd.product.name,
                                qty: itemToAdd.quantity,
                                price: itemToAdd.product.price_retail,
                                options: {
                                    sku: itemToAdd.product.sku,
                                },
                                subtotal: itemToAdd.quantity * itemToAdd.product.price_retail
                            };
                        @endif


                        console.log(newcart);
                        this.cart.push(Vue.util.extend({}, newcart));

                        this.cartItem = {
                            product: {},
                            total: '',
                            quantity: '',
                        };
                        this.$refs.quantity.focus();
                    }
                },
                removeCartItem: function ($index) {
                    this.cart.splice($index, 1);
                }
            },
            computed: {
                Total: function () {
                    var total = 0;
                    this.cart.forEach(function (item) {
                        total += (item.subtotal);
                    });
                    return total;
                }
            },
            created: function () {
                this.products = {!! $products !!};
                this.cart = {!! $cart !!};
            }
        });
    </script>
@stop