@extends('layouts.admin.app')
@section('title') Add Order - Zone 2 @stop
@section('main')
    <div id="app">

        {!! Form::open(['method'=>'POST','files'=>'true','action' => 'AdminAddOrderController@zone2Store', '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">LABEL SELECTION</h4>
                <div class="form-group">
                    {!! Form::label('label_type_id','Select Label Option:', ['class'=>'control-label col-sm-2']) !!}
                    <div class="col-sm-10">
                        {!! Form::select('label_type_id', $labelTypes, null,['class'=>'form-control', 'v-model'=>'label_type_id', 'placeholder'=>'No Label']) !!}
                        @if ($errors->has('label_type_id'))
                            <span class="invalid-feedback">
                                <strong>{{ $errors->first('label_type_id') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <template v-if="label_type_id == 1">
                    <h4 class="text-center">OUR NAME</h4>
                    <div class="form-group">
                        {!! Form::label('label_id','Select Label:', ['class'=>'control-label col-sm-2']) !!}
                        <div class="col-sm-10">
                            {!! Form::select('label_id', $our_name, null,['class'=>'form-control', 'placeholder'=>'Select Label']) !!}
                            @if ($errors->has('label_id'))
                                <span class="invalid-feedback">
                                <strong>{{ $errors->first('label_id') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                </template>
                <template v-if="label_type_id == 2">
                    <h4 class="text-center">YOUR NAME</h4>
                    <div class="form-group">
                        {!! Form::label('label_id','Select Label:', ['class'=>'control-label col-sm-2']) !!}
                        <div class="col-sm-10">
                            {!! Form::select('label_id', $your_name, null,['class'=>'form-control', 'placeholder'=>'Select Label']) !!}
                            @if ($errors->has('label_id'))
                                <span class="invalid-feedback">
                                <strong>{{ $errors->first('label_id') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        {!! Form::label('label_font','Select Font:', ['class'=>'control-label col-sm-2']) !!}
                        <div class="col-sm-10">
                            {!! Form::select('label_font', $font, null,['class'=>'form-control', 'placeholder'=>'Select Font']) !!}
                            @if ($errors->has('label_font'))
                                <span class="invalid-feedback">
                                <strong>{{ $errors->first('label_font') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        {!! Form::label('label_name','Customized Name :', ['class'=>'control-label col-sm-2']) !!}
                        <div class="col-sm-10">
                            {!! Form::text('label_name', null, ['class'=>'form-control','placeholder'=>'Enter Customized Name']) !!}
                            @if ($errors->has('label_name'))
                                <span class="invalid-feedback">
                                <strong>{{ $errors->first('label_name') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        {!! Form::label('label_contact1','Contact 1:', ['class'=>'control-label col-sm-2']) !!}
                        <div class="col-sm-10">
                            {!! Form::text('label_contact1', null, ['class'=>'form-control','placeholder'=>'Contact']) !!}
                            @if ($errors->has('label_contact1'))
                                <span class="invalid-feedback">
                                <strong>{{ $errors->first('label_contact1') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        {!! Form::label('label_contact2','Contact 2:', ['class'=>'control-label col-sm-2']) !!}
                        <div class="col-sm-10">
                            {!! Form::text('label_contact2', null, ['class'=>'form-control','placeholder'=>'Contact']) !!}
                            @if ($errors->has('label_contact2'))
                                <span class="invalid-feedback">
                                <strong>{{ $errors->first('label_contact2') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <div class="box box-info">
            <div class="box-body">
                <h4 class="text-center">PAYMENT METHOD</h4>
                <div class="form-group">
                    {!! Form::label('payment_method','Payment Method:', ['class'=>'control-label col-sm-2']) !!}
                    <div class="col-sm-10">
                        {!! Form::select('payment_method', ['cc'=>'Credit Card', 'invoice'=>'Invoice'], 'cc',['class'=>'form-control', 'v-model'=>'payment_method']) !!}
                        @if ($errors->has('payment_method'))
                            <span class="invalid-feedback">
                                <strong>{{ $errors->first('payment_method') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <template v-if="payment_method == 'invoice'">
                    <h4 class="text-center">INVOICE</h4>
                    <p class="text-center"><strong>Purchase Order Number will be sent to customer via email.</strong>
                    </p>
                </template>
                <template v-if="payment_method == 'cc'">
                    <h4 class="text-center">CREDIT CARD 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>
                </template>
            </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-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 select2" id="product"
                                        @keydown.enter.prevent="addToCart(cartItem)" v-select2>
                                    <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>

        @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: {
                users: [],
                results: [],
                arrowCounter: 0,
                isOpenFirstName: false,
                isOpenCompany: false,
                registeredUser: '{{ old('user_id') }}',

                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: [],
                payment_method: @if(old('payment_method')) '{!! old('payment_method')  !!}' @else 'cc' @endif,
                label_type_id: @if(old('label_type_id')) '{!! old('label_type_id')  !!}' @else '' @endif
            },
            methods: {
                onChangeCompany: function () {
                    this.isOpenCompany = true;
                    this.filterCompany();
                    this.arrowCounter = 0;
                },
                onChangeFirstName: function () {
                    this.isOpenFirstName = true;
                    this.filterFirstName();
                    this.arrowCounter = 0;
                },
                filterFirstName: function () {
                    var self = this;
                    this.results = this.users.filter(function (user) {
                        return user.first_name.toLowerCase().indexOf(self.customer.first_name.toLowerCase()) > -1
                    });
                },
                filterCompany: function () {
                    var self = this;
                    this.results = this.users.filter(function (user) {
                        return user.company.toLowerCase().indexOf(self.customer.company.toLowerCase()) > -1
                    });
                },
                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_number;
                    this.customer.email = result.email;
                    this.customer.bill_to = result.company;
                    this.customer.bill_address = result.address;
                    this.customer.bill_city = result.city;
                    this.customer.bill_state = result.state_id;
                    this.customer.bill_zip = result.zip;
                    this.customer.ship_to = result.company;
                    this.customer.ship_address = result.address;
                    this.customer.ship_city = result.city;
                    this.customer.ship_state = result.state_id;
                    this.customer.ship_zip = result.zip;
                    this.isOpenFirstName = false;
                    this.isOpenCompany = false;
                    this.arrowCounter = 0;
                },
                clearResult: function () {
                    var self = this;
                    setTimeout(function () {
                        self.isOpenFirstName = false;
                        self.isOpenCompany = false;
                    }, 1000)
                },
                onArrowDown: function () {
                    if (this.arrowCounter >= this.results.length) {
                        this.arrowCounter = 0;
                    } else if (this.arrowCounter < (this.results.length - 1)) {
                        this.arrowCounter = this.arrowCounter + 1;
                    }
                },
                onArrowUp: function () {
                    console.log(this.arrowCounter);
                    if (this.arrowCounter <= 0) {
                        this.arrowCounter = 0;
                    } else if (this.arrowCounter > 0) {
                        this.arrowCounter = this.arrowCounter - 1;
                    }

                },
                onEnter: 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_number;
                    this.customer.email = result.email;
                    this.customer.bill_to = result.company;
                    this.customer.bill_address = result.address;
                    this.customer.bill_city = result.city;
                    this.customer.bill_state = result.state_id;
                    this.customer.bill_zip = result.zip;
                    this.customer.ship_to = result.company;
                    this.customer.ship_address = result.address;
                    this.customer.ship_city = result.city;
                    this.customer.ship_state = result.state_id;
                    this.customer.ship_zip = result.zip;

                    this.customer.first_name = this.results[this.arrowCounter].first_name;
                    this.customer.last_name = this.results[this.arrowCounter].last_name;
                    this.customer.company = this.results[this.arrowCounter].company;
                    this.customer.phone = this.results[this.arrowCounter].phone_number;
                    this.customer.email = this.results[this.arrowCounter].email;
                    this.customer.bill_to = this.results[this.arrowCounter].company;
                    this.customer.bill_address = this.results[this.arrowCounter].address;
                    this.customer.bill_city = this.results[this.arrowCounter].city;
                    this.customer.bill_state = this.results[this.arrowCounter].state_id;
                    this.customer.bill_zip = this.results[this.arrowCounter].zip;

                    this.customer.ship_to = this.results[this.arrowCounter].company;
                    this.customer.ship_address = this.results[this.arrowCounter].address;
                    this.customer.ship_city = this.results[this.arrowCounter].city;
                    this.customer.ship_state = this.results[this.arrowCounter].state_id;
                    this.customer.ship_zip = this.results[this.arrowCounter].zip;

                    this.isOpenFirstName = false;
                    this.isOpenCompany = false;
                    this.arrowCounter = 0;
                },
                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) {

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

                        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);
                },
                registeredUserChanged: function () {
                    var self = this;
                    this.users.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.users = {!! $customers !!};
            }
        });
    </script>
@stop