@extends('layouts.admin.app')
@section('title') Add Order - Retail @stop
@section('style')
    <link href="{{ asset('css/selectize.css') }}" rel="stylesheet">
@endsection
@section('main')
    <div id="app">

        {!! Form::open(['method'=>'POST','files'=>'true','action' => 'AdminAddOrderController@retailStore', 'class'=>'form-horizontal','@keydown.enter.prevent=""', 'autocomplete'=>'off']) !!}

        @include('admin.add-order.partials.RegisteredUsers')
        @include('admin.add-order.partials.customerInfo')
        @include('admin.add-order.partials.shippingInfo')
        @include('admin.add-order.partials.billingInfo')

        <div class="box box-info">
            <div class="box-body">
                <h4 class="text-center">PAYMENT INFORMATION</h4>
                <div class="form-group">
                    {!! Form::label('card_type','Card Type:', ['class'=>'control-label col-sm-2']) !!}
                    <div class="col-sm-10">
                        {!! Form::select('card_type', $cards, null,['class'=>'form-control', 'placeholder'=>'Select Card Type']) !!}
                        @if ($errors->has('card_type'))
                            <span class="invalid-feedback">
                                <strong>{{ $errors->first('card_type') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="form-group">
                    {!! Form::label('card_name','Name on Card :', ['class'=>'control-label col-sm-2']) !!}
                    <div class="col-sm-10">
                        {!! Form::text('card_name', null, ['class'=>'form-control','placeholder'=>'Enter Name']) !!}
                        @if ($errors->has('card_name'))
                            <span class="invalid-feedback">
                                <strong>{{ $errors->first('card_name') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="form-group">
                    {!! Form::label('card_number','Card Number:', ['class'=>'control-label col-sm-2']) !!}
                    <div class="col-sm-10">
                        {!! Form::number('card_number', null, ['class'=>'form-control','placeholder'=>'Card Number']) !!}
                        @if ($errors->has('card_number'))
                            <span class="invalid-feedback">
                                <strong>{{ $errors->first('card_number') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="form-group">
                    {!! Form::label('card_code','Validation Code:', ['class'=>'control-label col-sm-2']) !!}
                    <div class="col-sm-10">
                        {!! Form::number('card_code', null, ['class'=>'form-control','placeholder'=>'Validation Code']) !!}
                        @if ($errors->has('card_code'))
                            <span class="invalid-feedback">
                                <strong>{{ $errors->first('card_code') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="form-group">
                    {!! Form::label('card_month','Expiration Month:', ['class'=>'control-label col-sm-2']) !!}
                    <div class="col-sm-10">
                        {!! Form::select('card_month', $months, null,['class'=>'form-control', 'placeholder'=>'Select Month']) !!}
                        @if ($errors->has('card_month'))
                            <span class="invalid-feedback">
                                <strong>{{ $errors->first('card_month') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="form-group">
                    {!! Form::label('card_year','Expiration Year:', ['class'=>'control-label col-sm-2']) !!}
                    <div class="col-sm-10">
                        {!! Form::select('card_year', $years, null,['class'=>'form-control', 'placeholder'=>'Select Year']) !!}
                        @if ($errors->has('card_year'))
                            <span class="invalid-feedback">
                                <strong>{{ $errors->first('card_year') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <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-2 text-center">
                                {!! Form::label('stocks','Stocks') !!}
                                <p style="font-weight: bold" v-if="cartItem.product.inventory">
                                    @{{ cartItem.product.inventory }}
                                </p>
                                <p v-else>
                                    0
                                </p>
                            </div>
                            <div class="col-sm-2 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 select2" id="product"
                                        v-select2 @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-2 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>

        @include('admin.add-order.partials.addInfo')
        <textarea class="hidden" name="cart">@{{ cart }}</textarea>
        <input class="hidden" type="text" name="total" :value="Total">
        {!! Form::submit('Submit Order', ['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>
        $(document).on('focus', '.select2', function (e) {
            if (e.originalEvent) {
                $(this).siblings('select').select2('open');
            }
        });

    </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, '.', ',');
        });

        Vue.directive('select2', {
            inserted: function (el) {
                var self = this;
                $(el).select2({
                    width: 'auto'
                }).on('select2:select', function (e) {
                    if (e.detail === "vue-directive") {
                        return; // prevent stack overflow (i.e. listening to the event we threw ourselves)
                    }
                    // throw regular change (non jQuery) event, so vue reacts

                    (function () {
                        function CustomEvent(event, params) {
                            params = params || {bubbles: false, cancelable: false, detail: undefined};
                            var evt = document.createEvent('CustomEvent');
                            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
                            return evt;
                        };

                        CustomEvent.prototype = window.Event.prototype;
                        window.CustomEvent = CustomEvent;
                    })();

                    el.dispatchEvent(new CustomEvent("change", {
                        detail: "vue-directive"
                    }));
                    return false;
                })
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                customers: [],
                results: [],
                arrowCounter: 0,
                registeredUser: '{{ old('user_id') }}',
                states:[],

                customer: {
                    first_name: '{{ old('first_name') }}',
                    last_name: '{{ old('last_name') }}',
                    company: '{{ old('company') }}',
                    phone: '{{ old('phone') }}',
                    email: '{{ old('email') }}',
                    bill_to: '{{ old('bill_to') }}',
                    bill_address: '{{ old('bill_address') }}',
                    bill_city: '{{ old('bill_city') }}',
                    bill_state: '{{ old('bill_state') }}',
                    bill_zip: '{{ old('bill_zip') }}',
                    ship_to: '{{ old('ship_to') }}',
                    ship_address: '{{ old('ship_address') }}',
                    ship_city: '{{ old('ship_city') }}',
                    ship_state: '{{ old('ship_state') }}',
                    ship_zip: '{{ old('ship_zip') }}'
                },
                cart: @if(old('cart')) {!! old('cart')  !!} @else [] @endif,
                cartItem: {
                    product: {},
                    total: '',
                    quantity: '',
                },
                products: [],
            },
            methods: {
                setResult: function (result) {
                    this.customer.first_name = result.first_name;
                    this.customer.last_name = result.last_name;
                    this.customer.company = result.company;
                    this.customer.phone = result.phone;
                    this.customer.email = result.email;
                    this.customer.bill_to = result.customer;
                    this.customer.bill_address = result.bill_address;
                    this.customer.bill_city = result.bill_city;
                    this.customer.bill_state = result.bill_state;
                    this.customer.bill_zip = result.bill_zip;
                    this.customer.ship_to = result.customer;
                    this.customer.ship_address = result.ship_address;
                    this.customer.ship_city = result.ship_city;
                    this.customer.ship_state = result.ship_state;
                    this.customer.ship_zip = result.ship_zip;
                },
                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) {

                        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
                        };

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

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