@extends('layouts.app')
@section('style')
    <link rel="stylesheet" href="{{url('vue/select2/select2.min.css')}}">
    <style>
        .v-select input[type=search], .v-select input[type=search]:focus {

            width: 50%  !important;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            padding: 8px;
            padding: 4px 2px;

        }
    </style>
    {{--<link rel="stylesheet" href="{{url('vue/wizardform/vue-form-wizard.min.css')}}">--}}
    {{--<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />--}}
    {{--<link src="{{url('/')}}/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />--}}

@stop

@section('content')

    <!-- BEGIN CONTENT BODY -->

        <!-- END PAGE BAR -->
    <div class="row">

    <div class="portlet light bg-inverse">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-equalizer font-green-haze"></i>
                <span class="caption-subject font-green-haze bold uppercase">Add New Item</span>
                {{--<span class="caption-helper">some info...</span>--}}
            </div>
            <div class="tools">
                <a href="" class="collapse"> </a>
                <a href="#portlet-config" data-toggle="modal" class="config"> </a>
                <a href="" class="reload"> </a>
                <a href="" class="remove"> </a>
            </div>
        </div>
        <div class="portlet-body form" id="item-service" v-cloak>
            <!-- BEGIN FORM-->
            {{Form::open(['route' => 'item.store','method' => 'POST','class' => 'form-horizontal'])}}
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">Type</label>
                                <div class="col-md-9">
                                    {{Form::select('type',[
                                    'service'           => 'service',
                                    'inventoryPart'     => 'Inventory Part',
                                    'inventoryAssembly' => 'Inventory Assembly',
                                    'nonInventoryPart'  => 'Non Inventory Part'

                                    ],'inventoryPart',['class' => 'form-control','v-model' => 'type'])}}
                                    {{--<span class="help-block"> @{{ type }} </span>--}}
                                </div>
                                {{--<div class="col-md-9">--}}
                                    {{--{{Form::select('type',[--}}
                                    {{--'service'           => 'service',--}}
                                    {{--'inventoryPart'     => 'Inventory Part',--}}
                                    {{--'inventoryAssembly' => 'Inventory Assembly',--}}
                                    {{--'nonInventoryPart'  => 'Non Inventory Part',--}}
                                    {{--'otherCharge'       => 'Other Charge',--}}
                                    {{--'subtotal'          => 'Subtotal',--}}
                                    {{--'group'             => 'Group',--}}
                                    {{--'discount'          => 'Discount',--}}
                                    {{--'payment'           => 'Payment',--}}
                                    {{--'salesTaxItem'      => 'Sales Tax Item',--}}
                                    {{--'salesTaxGroup'     => 'Sales Tax Group'--}}

                                    {{--],'inventoryPart',['class' => 'form-control','v-model' => 'type'])}}--}}
                                    {{--<span class="help-block"> @{{ type }} </span>--}}
                                {{--</div>--}}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3"> Name</label>
                                <div class="col-md-9">
                                    {{Form::text('name',null,['class' => 'form-control','placeholder' => 'Enter Item Name'])}}
                                    {{--<span class="help-block"> This is inline help </span>--}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-section"></div>
                    {{--<h3 class="form-section">Person Info</h3>--}}
                    {{--<div class="row">--}}

                        {{--<!--/span-->--}}
                        {{--<div class="col-md-6">--}}
                            {{--<div class="form-group ">--}}
                                {{--<label class="control-label col-md-3">Subitem Of</label>--}}
                                {{--<div class="col-md-9">--}}
                                    {{--{{Form::select('parent_id',$item,null,['class' => 'form-control'])}}--}}

                                    {{--<span class="help-block"> This field has error. </span>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<!--/span-->--}}
                    {{--</div>--}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">U/M Set</label>
                                <div class="col-md-6">
                                    {{Form::select('um_id',$measure,null,['class' => 'form-control'])}}
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn default">Edit</button>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">Checkboxes</label>
                                <div class="col-md-9">
                                    <label class="mt-checkbox">
                                        <input type="checkbox" v-model="isAssembly"> Checkbox 1 @{{ isAssembly }}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-section"></div>
                    <!--/row-->
                    <div class="row">

                        <div class="col-md-6" v-if="isAssembly || type == 'inventoryPart' ">
                            <div class="form-group">
                                <label class="control-label col-md-3">Description1</label>
                                <div class="col-md-9">
                                    {{Form::textarea('description',null,['class' => 'form-control','rows' => '7'])}}

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Cost</label>
                                <div class="col-md-6">
                                    {{Form::number('cost',null,['class' => 'form-control','v-model'=>'cost'])}}
                                </div>
                                {{--<label class="control-label col-md-3">Rate1</label>--}}
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Expense Account</label>
                                <div class="col-md-9">
                                    {{Form::select('cost_account',$cost,null,['class' => 'form-control'])}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Preferred Vendor</label>
                                <div class="col-md-9">
                                    {{Form::select('vendor',[],null,['class' => 'form-control'])}}
                                </div>
                            </div>


                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">Description</label>
                                <div class="col-md-9">
                                    {{Form::textarea('description',null,['class' => 'form-control','rows' => '7'])}}

                                </div>
                            </div>
                        </div>
                        <!--/span-->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">Rate</label>
                                <div class="col-md-9">
                                    {{Form::number('rate',null,['class' => 'form-control'])}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">tax</label>
                                <div class="col-md-9">
                                    {{Form::select('tax',[],null,['class' => 'form-control'])}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Account</label>
                                <div class="col-md-9">
                                    {{Form::select('income_account',$income,null,['class' => 'form-control'])}}
                                </div>
                            </div>
                        </div>
                        <!--/span-->
                    </div>
                    <!--/row-->
                    <div class="form-section"></div>
                        <div class="row" v-if="(type == 'inventoryAssembly')">
                            <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th style="width: 1%;">No.</th>
                                        <th style="width: 15%;">Iteme</th>
                                        <th style="width: 15%;">Description</th>
                                        <th style="width: 10%;">Qty</th>
                                        <th style="width: 15%;">um</th>
                                        <th style="width: 15%;">Cost</th>
                                        <th style="width: 130px;"></th>
                                    </tr>
                                    </thead>
                                    <tbody v-sortable.tr="rows" >
                                    <tr v-for="(row ,index = 0) in  rows ">
                                        <td>
                                            @{{ index +1 }}

                                            <span v-for="option in row.options" >
                                               <span v-bind:value="option.index = index"></span>
                                            </span>

                                        </td>
                                        <td>

                                            <v-select :on-change="alertCallback" placeholder="item"  :options="row.options"></v-select>
                                            <input v-if="(row.item != null )" type="hidden" name="item[]" v-model="row.item.value" >

                                        </td>
                                        <td>

                                            <input class="form-control" v-model="row.description"/>

                                        </td>
                                        <td>
                                            <input name="qut[]" class="form-control" value="0"   v-model="row.qty" number/>
                                        </td>
                                        <td>
                                            <v-select :on-change="ddff" placeholder="measure" v-model="row.dum" :options="row.um"></v-select>
                                            <input v-if="(row.dum != null )" type="hidden" name="measure[]" v-model="row.dum.value" >
                                        </td>
                                        <td>
                                            <div class="input-group">

                                                <input  name="cost[]"  v-model="row.price"  min="0"  data-number-stepfactor="100" class="form-control currency"  />
                                            </div>

                                        </td>

                                        <td>
                                            <div class="input-group">
                                                <input  name="price[]"  v-bind:value="row.qty * row.price" disabled min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" />
                                            </div>
                                        </td>
                                        <td>
                                            <span  class="btn btn-primary btn-xs button-padding" v-on:click="addRow(index)"> +</span>
                                            <span v-if="rows.length > 1" class="btn btn-danger btn-xs button-padding" v-on:click="removeRow(index)"> - </span>
                                        </td>
                                    </tr>
                                    </tbody>
                                    <tfoot>

                                    {{--<tr>--}}
                                    {{--<td colspan="5" class="text-right">TAX</td>--}}
                                    {{--<td colspan="1" class="text-right">@{{ taxtotal }}</td>--}}
                                    {{--<td></td>--}}
                                    {{--</tr>--}}
                                    <tr>
                                        {{--<td colspan="5" class="text-right">TOTAL</td>--}}
                                        {{--<td colspan="1" class="text-right">@{{ total1  }}</td>--}}
                                        <td></td>
                                    </tr>
                                    {{--<tr>--}}
                                    {{--<td colspan="5" class="text-right">DELIVERY</td>--}}
                                    {{--<td colspan="1" class="text-right"><input class="form-control text-right" v-model="delivery " number/></td>--}}
                                    {{--<td></td>--}}
                                    {{--</tr>--}}
                                    {{--<tr>--}}
                                    {{--<td colspan="5" class="text-right"><strong>GRANDTOTAL</strong></td>--}}
                                    {{--<td colspan="1" class="text-right"><strong>@{{ grandtotal = total + delivery | currencyDisplay }}</strong></td>--}}
                                    {{--<td colspan="1" class="text-right"><strong>@{{  total1 }}</strong></td>--}}
                                    {{--<td></td>--}}


                                    {{--</tr>--}}
                                    </tfoot>
                                </table>

                        </div>
                    </div>
                    <div class="form-section"></div>
                    <div class="row" v-if="(type == 'inventoryPart' || type == 'inventoryAssembly')">
                        <div class="col-md-2">
                            <div>
                                <label class="control-label">Asset Account</label>
                                {{Form::select('asset_account',$asset,null,['class' => 'form-control'])}}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">Min</label>
                            {{Form::number('min',null,['class' => 'form-control'])}}
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">Max</label>
                            {{Form::number('max',null,['class' => 'form-control'])}}
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">On Hand</label>
                            {{Form::number('quantity',null,['class' => 'form-control','v-model'=>'onHand'])}}
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">Total Value</label>
                            {{Form::number('total',null,['class' => 'form-control','v-model'=>'result'])}}
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">As of</label>
                            <input type="text" class="form-control" placeholder="2017/01/01/">
                        </div>
                </div>
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9">
                                    <button type="submit" class="btn green">Submit</button>
                                    <button type="button" class="btn default">Cancel</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6"> </div>
                    </div>
                </div>
           {{Form::close()}}
            <!-- END FORM-->
        </div>
    </div>
    </div>
    {{--<div class="row">--}}
            {{--<div class="col-md-12">--}}
                {{--<div class="portlet light bordered" id="form_wizard_d">--}}
                    {{--<div class="portlet-title">--}}
                        {{--<div class="caption">--}}
                            {{--<i class=" icon-layers font-red"></i>--}}
                            {{--<span class="caption-subject font-red bold uppercase"> Form Wizard ---}}
                                                {{--<span class="step-title"> Step 1 of 2 </span>--}}
                                            {{--</span>--}}
                        {{--</div>--}}
                        {{--<div class="actions">--}}
                            {{--<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">--}}
                                {{--<i class="icon-cloud-upload"></i>--}}
                            {{--</a>--}}
                            {{--<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">--}}
                                {{--<i class="icon-wrench"></i>--}}
                            {{--</a>--}}
                            {{--<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">--}}
                                {{--<i class="icon-trash"></i>--}}
                            {{--</a>--}}
                        {{--</div>--}}
                    {{--</div>--}}




                    {{--<div class="portlet-body form">--}}
                        {{--{{Form::open(['route'=>'item.store','method'=>'post','class'=> 'form-horizontal','id'=>'account-form','v-el:custom'])}}--}}

                            {{--<div class="form-wizard" id="accot">--}}
                                {{--<div class="form-body">--}}

                                    {{--<div class="tab-content">--}}
                                        {{--<div class="alert alert-danger display-none">--}}
                                            {{--<button class="close" data-dismiss="alert"></button> You have some form errors. Please check below. </div>--}}
                                        {{--<div class="alert alert-success display-none">--}}
                                            {{--<button class="close" data-dismiss="alert"></button> Your form validation is successful! </div>--}}

                                        {{--<div id="app">--}}
                                            {{--<div></div>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--{!! Form::close() !!}--}}
                    {{--</div>--}}


                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
    {{--<!-- END CONTENT BODY -->--}}
@endsection
@push('scripts')



<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="{{url('/')}}/assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="{{url('/')}}/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="{{url('/')}}/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{url('/')}}/assets/pages/scripts/components-date-time-pickers.min.js" type="text/javascript"></script>





        {{--<script type="text/javascript">--}}

            {{--$(document).ready(function(){--}}

                {{--$('#select1').select2({--}}
                    {{--tags: "true",--}}
                    {{--placeholder: "ddddd",--}}

                    {{--tokenSeparators: [',', ' ']--}}
                {{--});--}}
            {{--});--}}
        {{--</script>--}}



        <!-- END PAGE LEVEL SCRIPTS -->
{{--<script src="{{url('vue/wizardform/vue.min.js')}}"></script>--}}
<script src="{{url('vue/vue@2.4.2.js')}}"></script>
<script src="{{url('vue/wizardform/vue-form-wizard.js')}}"></script>
<script src="{{url('vue/accounting.min.js')}}"></script>
<script src="{{url('vue/Sortable.js')}}"></script>
<script src="{{url('vue/select2/vue-select@2.2.0.js')}}"></script>


<script >
    Vue.component('v-select', VueSelect.VueSelect);
    Vue.directive('sortable', {
        inserted: function (el, binding, vnode) {
            var sortable = new Sortable(el, binding.value || {});

            if (binding.arg) {
                if (!vnode.context.sortable) {
                    vnode.context.sortable = {}
                }

                //  Throw an error if the given ID is not unique
                if (vnode.context.sortable[binding.arg]) {
                    console.warn('[vue-sortable] cannot set already defined sortable id: \'' + binding.arg + '\'')
                } else {
                    vnode.context.sortable[binding.arg] = sortable
                }
            }
        }
    });
    new Vue({
        el: '#item-service',
        data: {
            type: '',
            currency: false,
            isAssembly: false,
            isInventory: false,
            cost: 0,
            onHand: 0,
            total: 0,
            balance: false,
            message: "tets",
            pro: {
                width: ''
            },

            rows: [  
                {
                    options: {!! json_encode($pp) !!},
                    item: {
                        label: " ",
                        value: null,
                        price: 0,
                        unit: 1000,
                        index: 0,
                        um: [
                            {label: ' ', value: 'Foo2', unit: 1}

                        ],
                        dum: {
                            label: ' ',
                            value: null,
                            unit: 1
                        }
                    },
                    qty: 1,

                    description: "Something",
                    symbol: "{{getHomeCurrency()["code"]}},{{getHomeCurrency()["code"]}},{{Currency()->exchange_rate}}",
                    price: 0,
                    unit: 1,
                    dprice: 0,
                    tax: 10,
                    index: 0,
                    total: 0
                },
            ],
        },
        computed: {
            description: function (createElement) {
                this.total = this.cost * this.noHand

                if (this.type == '') {
                    this.pro.width = '0'
                }
                else {
                    this.pro.width = '50%'
                }

                if (this.type == 'isInventory') {

                    this.isInventory = true;
                    this.balance = false
                    return 'income'
                }
                else if (this.type == 'inventoryPart') {

                    return;
                }
                else if (this.type == 'asset') {
                    this.currency = false
                    this.balance = true
                    return 'asset'
                }
                else if (this.type == 'bank') {
                    this.currency = true
                    this.balance = true
                    return 'bank'
                }
                else if (this.type == 'liability') {
                    this.currency = false
                    this.balance = true
                    return 'liability'
                }
                else if (this.type == 'CreditCard') {
                    this.currency = true
                    this.balance = true
                    return 'credit'
                }
                else if (this.type == 'equity') {
                    this.currency = false
                    this.balance = true
                    return 'equity'
                }
                else if (this.type == 'accountsReceivable') {
                    this.currency = true
                    this.balance = false
                    return 'accountsReceivable'
                }
                else if (this.type == 'otherCurrentAsset') {
                    this.currency = false
                    this.balance = false
                    return 'otherCurrentAsset'
                }
                else if (this.type == 'otherAsset') {
                    this.currency = false
                    this.balance = true
                    return 'otherAsset'
                }
                else if (this.type == 'accountsPayable') {
                    this.currency = true
                    this.balance = false
                    return 'accountsPayable'
                }
                else if (this.type == 'otherCurrentLiability') {
                    this.currency = false
                    this.balance = true
                    return 'otherCurrentLiability'
                }
                else if (this.type == 'longTermLiability') {
                    this.currency = false
                    this.balance = true
                    return 'longTermLiability'
                }
                else if (this.type == 'costOfGoodSold') {
                    this.currency = false
                    this.balance = false
                    return 'costOfGoodSold'
                }
                else if (this.type == 'otherIncome') {
                    this.currency = false
                    this.balance = false
                    return 'otherIncome'
                }
                else if (this.type == 'otherExpense') {
                    this.currency = false
                    this.balance = false
                    return 'otherExpense'
                }

            },
            result: function () {
                return this.cost * this.onHand;
            }
        },
        methods: {
            onComplete: function () {
                document.getElementById("account-form").submit()
//                this.$emit('on-complete')
//                alert('Yay. Done!');
            },
            addRow: function (index) {
                try {
                    this.rows.splice(index + 1, 0,

                        {
                            options: {!! json_encode($pp) !!},
                            item: {
                                label: " ",
                                value: null,
                                price: 0,
                                unit: 1000,
                                index: 0,
                                um: [
                                    {label: ' ', value: 'Foo2', unit: 1}

                                ],
                                dum: {
                                    label: ' ',
                                    value: null,
                                    unit: 1
                                }
                            },
                            qty: 1,

                            description: "Something",
                            symbol: "{{getHomeCurrency()["code"]}},{{getHomeCurrency()["code"]}},{{getHomeCurrency()["rate"]}}",
                            price: 0,
                            unit: 1,
                            dprice: 0,
                            tax: 10,
                            index: 0,
                            total: 0
                        }
                    );
                } catch (e) {
                    console.log(e);
                }
            },
            alertCallback: function (val) {
//                alert(JSON.stringify(val))
//                alert(val.index)

                if (val != null) {
                    val.um.forEach(function (v) {
                        v.index = val.index;
                    });
                    var row = this.rows[val.index];
                    row.um = (val.um != null) ? val.um : [];
                    row.dum = (val.dum != null) ? val.dum : [];
                    row.dum.index = val.index;
                    row.unit = (val.dum.unit != null) ? val.dum.unit : 1;
                    row.price = (val.price != null) ? val.price : 0;
                    row.dprice = (val.price != null) ? val.price : 0;
                    row.item = val;


                } else {
//                    val= this.rows[0]
                }

//                val.um=val

//                alert(val.value);
//                alert(JSON.stringify(val))
//                alert(JSON.stringify(val.um))
            }
            ,

            ddf: function (index) {
                var row = this.rows[index];
                row.price = (((row.dum.unit * row.dprice) / row.unit) * row.symbol.split(',')[2]);
//                this.rows[index].price =  this.rows[index].symbol.split(',')[2] * this.rows[index].dprice;
//                alert(index);
            },

            ddff: function (val) {

                if (val != null) {
                    var row = this.rows[val.index];

                    row.price = (((val.unit * row.dprice) / row.unit) * row.symbol.split(',')[2]);
                    row.dum = val
                }
//
//                var row = this.rows[index];
//                row.price =  (((row.dum.unit *row.dprice)/row.unit)*row.symbol.split(',')[2]);
//                this.rows[index].price =  this.rows[index].symbol.split(',')[2] * this.rows[index].dprice;
//                alert(index);
            },

            removeRow: function (index) {
                this.rows.splice(index, 1);
            },

        }
    });

</script>

{{--<script>--}}


{{--$v = new Vue({--}}

    {{--el:"#item-servicedd",--}}
    {{--data:{--}}
        {{--type:'',--}}
        {{--message: "tets",--}}
        {{--pro:{--}}
            {{--width: ''--}}
        {{--},--}}
    {{--},--}}
    {{--computed:{--}}
        {{--description: function (createElement) {--}}
            {{--if(this.type == ''){--}}
                {{--this.pro.width='0'--}}
            {{--}--}}
            {{--else{--}}
                {{--this.pro.width='50%'--}}
            {{--}--}}

            {{--if(this.type == 'incom'){--}}

               {{--return {FF:'DDD'}--}}
            {{--}--}}
            {{--else if(this.type == 'expense'){--}}
                {{--return 'expense'--}}
            {{--}--}}
            {{--else if(this.type == 'asset'){--}}
                {{--return 'asset'--}}
            {{--}--}}
            {{--else if(this.type == 'bank'){--}}
                {{--return 'bank'--}}
            {{--}--}}
            {{--else if(this.type == 'liability'){--}}
                {{--return 'liability'--}}
            {{--}--}}
            {{--else if(this.type == 'CreditCard'){--}}
                {{--return 'credit'--}}
            {{--}--}}
            {{--else if(this.type == 'equity'){--}}
                {{--return 'equity'--}}
            {{--}--}}

            {{--else if(this.type == 'otherAsset'){--}}
                {{--return 'otherAsset'--}}
            {{--}--}}
            {{--else if(this.type == 'otherExpense'){--}}
                {{--return 'otherExpense'--}}
            {{--}--}}
            {{--else if(this.type == 'accountsPayable'){--}}
                {{--return 'accountsPayable'--}}
            {{--}--}}
        {{--}--}}
    {{--}--}}

{{--});--}}
{{--</script>--}}

@endpush