@extends('layouts.app')
@section('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 -->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="index.html">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Form Stuff</span>
                </li>
            </ul>
            <div class="page-toolbar">
                <div class="btn-group pull-right">
                    <button type="button" class="btn green btn-sm btn-outline dropdown-toggle" data-toggle="dropdown"> Actions
                        <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li>
                            <a href="#">
                                <i class="icon-bell"></i> Action</a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon-shield"></i> Another action</a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon-user"></i> Something else here</a>
                        </li>
                        <li class="divider"> </li>
                        <li>
                            <a href="#">
                                <i class="icon-bag"></i> Separated link</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END PAGE BAR -->

    <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">
            <!-- 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',
                                    '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>
                    <div class="form-section"></div>
                    {{--<h3 class="form-section">Person Info</h3>--}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">Item 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>
                        <!--/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 == '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 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 -->--}}


    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif





@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/wizardform/vue-form-wizard.js')}}"></script>


<script >
    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: ''
            },
        },
        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!');
            }
        }
    })

</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>
    </div>
@endpush