@extends('layouts.app')
<link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">


@section('content')
    <div class="row">
        <div class="portlet light bordered">
            <!-- BEGIN TAB PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-anchor font-green-sharp"></i>
                        <span class="caption-subject font-green-sharp bold uppercase">@lang('layout.EditItemPriceLevel')</span>
                    </div>
                    <div class="actions">
                    </div>
                </div>
                <div id="appPriceLevel" class="portlet-body">

                    <div class="tabbable tabbable-tabdrop">


                        <div>
                            {{Form::open(['route' => ['payroll.price.level.update',$priceLevel->id],'method' => 'patch','class' => 'form-horizontal','id'=>'price-level-form'])}}
                            {{ csrf_field() }}
                            <div class="tab-content">

                                <div class="tab-pane active" id="tab1">

                                    <div v-cloak class="portlet-body form" style="margin-bottom:50%;">

                                        <div class="form-body">
                                            <div class="row">

                                                <div class="col-lg-4 col-md-4 col-sm-12">
                                                    <div class="form-group">
                                                        <label for="name">@lang('layout.Name')</label>
                                                        <input type="text" name="name"
                                                               placeholder="@lang('layout.Name')" required
                                                               class="form-control" value="{{$priceLevel->name}}" >
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                                    <div class="form-group">
                                                        <div class="col-md-12">
                                                            <label class="control-label">@lang('layout.Currency')</label>

                                                            <v-select label="code"
                                                                      :options="currencies"
                                                                      v-model="selected_currency"></v-select>
                                                            <input type="hidden" name="currency" v-if="selected_currency != null"
                                                                   v-validate="'required'"
                                                                   data-vv-as="@lang('layout.Currency')"
                                                                   :value="selected_currency.id">
                                                            <span class="required">@{{ errors.first('currency') }}</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-12">
                                                    <div class="form-group">
                                                        <label for="description"> @lang('layout.Description')</label>
                                                        <textarea name="description" id="description" cols="30" class="form-control"
                                                                  placeholder="@lang('layout.Description')"
                                                                  rows="1">{{$priceLevel->description}}</textarea>
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="row" style="overflow-x: scroll;">
                                                <div class="col-md-12 col-lg-12 col-sm-12">
                                                    <table id="table_content" class="table table-bordered table-advance">
                                                        <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th style="min-width: 130px">@lang('layout.PayrollType') </th>
                                                            <th style="min-width: 100px">@lang('layout.Measure') </th>
                                                            <th style="min-width: 130px">@lang('layout.Amount') </th>
                                                            <th v-show="showWhat('contract_salary')=='yes'" style="min-width: 130px">@lang('layout.AmountOfWork') </th>
                                                            <th></th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr v-for="(type,index) in types">
                                                            <td>@{{index+1}}</td>
                                                            <td>
                                                                <v-select label = "name" :options="itemTypes" @input="addNew(index)"
                                                                          v-model="type.item"></v-select>
                                                                <input type="hidden" name="item_type_id[]"
                                                                       :value="type.item ? type.item.id:null">
                                                            </td>

                                                            <td>
                                                                <v-select placeholder="@lang('layout.SelectUnitMeasure') " label="name"  :options="measureList" v-model="type.measure" ></v-select>
                                                                <input type="hidden" name="um_id[]" :value="type.measure?type.measure.id:null">
                                                            </td>

                                                            <td>
                                                                <input type="number" class="form-control" name="amount[]" placeholder="@lang('layout.Amount')" v-model="type.amount">
                                                            </td>
                                                            <td v-show="showWhat('contract_salary')=='yes'">
                                                                <input type="number" class="form-control"
                                                                       name="amount_of_work[]"
                                                                       placeholder="@lang('layout.AmountOfWork')" v-model="type.amount_of_work">
                                                            </td>
                                                            <td>
                                                                <span @click="deleteItem(index)">
                                                                    <i class="paddint-both glyphicon glyphicon-trash"></i>
                                                                </span>
                                                            </td>
                                                        </tr>
                                                        <tr style="background-color: #ffffff;">
                                                            <td colspan="4">
                                                                <center>
                                                                    <button type="button" @click="addNew()"
                                                                            class="btn btn-success">
                                                                        <i class="fa fa-plus"></i>
                                                                    </button>
                                                                </center>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>

                                            </div>


                                        </div>
                                        <div class="col-xs-12 col-sm-10 col-md-11 text-center">
                                            <button type="button" onclick="regForm(this)"
                                                    class="btn green">@lang('layout.Update')</button>
                                            <a href="{{route('payroll.price.level.index')}}" class="btn default"><i
                                                        class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>

                                        </div>
                                    </div>


                                </div>


                                {!! Form::close() !!}

                            </div>

                        </div>


                    </div>
                    <p> &nbsp; </p>
                    <p> &nbsp; </p>
                </div>
            </div>
            <!-- END TAB PORTLET-->
        </div>
    </div>

@endsection
@push('scripts')


    <script type="text/javascript">

        @if(App::getLocale())
    Vue.use(VeeValidate, {
        locale: '{{App::getLocale()}}',
    });
    @else
        Vue.use(VeeValidate, {
            locale: 'en',
        });
        @endif



        Vue.component('v-select', VueSelect.VueSelect);

        // end new member

        let currency = {!! $currencies !!};
        let itemType = {!! $itemTypes !!};
        let details = {!! $details !!};
        let priceLevel = {!! json_encode($priceLevel) !!};
        let measureList = {!! json_encode($measure) !!};

        new Vue({
            el: '#appPriceLevel',
            data: {
                currencies: currency,
                selected_currency: null,
                itemTypes: itemType,
                measureList: measureList,
                types:[{item:null, amount:null,measure:null,amount_of_work:null}],
            },
            created(){
                this.setType();
            },
            methods:
                {
                    submit(){
                        $("#price-level-form").submit();
                    },
                    setType(){
                        if(details.length > 0){
                            this.types = [];
                            details.forEach((detail)=>{
                                itemType.forEach((item)=>{
                                    if(detail.item_type_payroll_id == item.id){
                                        this.types.push({
                                            item:item,
                                            amount:detail.amount,
                                            measure: null,
                                            amount_of_work:detail.amount_of_work
                                        });
                                    }
                                });
                                measureList.forEach((mes)=>{
                                    if(detail.measure_unit_id == mes.id){
                                        this.types[this.types.length - 1].measure = mes;
                                    }
                                })
                            });
                        }
                        console.log('types', this.types);
                        currency.forEach((a)=>{
                            if(a.id ==priceLevel.currency){
                                this.selected_currency = a;
                            }
                        })
                    },

                    deleteItem(index) {

                        if (this.types.length > 1)
                            this.types.splice(index, 1);
                        else
                            this.types = [ {
                                item: null,
                                amount: null,
                                measure:null
                            }];
                    },
                    addNew(index = -1 ){
                        if(index < 0 ||  (index  == this.types.length - 1)){
                            this.types.push({
                                item:null,
                                amount: null,
                                measure:null
                            })
                        }
                    }

                },


        });

    </script>



@endpush