@extends('layouts.app')
@section('style')

<style>
	
	#table_content thead th {
    background-color: rgb(84, 199, 211);
    color: #ffffff;
    font-size: 14px;
}
</style>
@stop
@section('content')
@include('inventories.modal')
<!-- 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">@lang('layout.MemberStatement')</span>
			</div>
		</div>
		<div class="portlet-body form" id="item-service" v-cloak style="margin-bottom:20%;">
			<!-- BEGIN FORM-->
			{{Form::model($closeYearMember,['route' => ['closeYearMemberStatement.update',$closeYearMember->id],'method' => 'PATCH','class' => 'form-horizontal','id'=>'inventory-form'])}}
			<div class="form-body">

				<div class="row">
					<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
						<div class="form-group">
							<label class="control-label">@lang('layout.CloseYear')</label>
							<v-select placeholder="@lang('layout.CloseYear')" tabindex = "1" label="name"  :options="{{ json_encode($closeYear) }}" v-model="closeYear" disabled ></v-select>
							<input type="hidden" name="closeYear_id" v-validate="'required'" data-vv-as="@lang('layout.CloseYear')" :value="(closeYear)?closeYear.id:null">
							<span class="required">@{{ errors.first('closeYear_id') }}</span>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
						<div class="form-group">
							<label class="control-label">@lang('layout.Currency')</label>
							<input class="form-control" :value="(closeYear)?closeYear.base_currency:null" readonly>
						</div>
					</div>
				</div>  

				<!--/row-->
				<div class="row" style="overflow-x: scroll;">
					<!-- begin payments -->
					<table id="table_content" class="table table-bordered table-advance">
						<thead>
							<tr>
								<th class="text-center">@lang('layout.Name')</th>
								<th class="text-center">@lang('layout.Phone')</th>
								<th class="text-center">@lang('layout.Address')</th>
								<th width="50%">
									<center class="center"> @lang('layout.Balance')
										<table id="table_content" class="table table-bordered table-advance" style="width:100%">
											<tr class="">
												<th width="20%">
													<div class="center"> @lang('layout.Currency') </div>
												</th>
												<th width="30%">
													<div class="center"> @lang('layout.Rate') </div>
												</th>
												<th width="50%">
													<div class="center"> @lang('layout.Balance') </div>
												</th>
											</tr>
										</table>
									</center>
								</th>
							</tr>
						</thead>
						<tbody>
													<tr>
							<input type="hidden" name="member_id[{{$index}}]" value="{{$closeYearMember->id}}" />
								<td>{{$closeYearMember->name}} </td>
								<td>{{$closeYearMember->phone}}</td>
								<td>{{$closeYearMember->address1}}</td>
								<td width="50%">
									<table id="table_content" class="table table-bordered table-advance" style="width:100%">
										@foreach($statement AS $key1=>$row)
										<tr>
											<td width="20%">
												<input  name="currency[{{$index}}][{{$row['currency']}}]" value="{{$row['currency']}}" class="form-control" placeholder="@lang('layout.Currency')" readonly />
											</td>
											<td width="30%">
												<input  name="rate[{{$index}}][{{$row['currency']}}]" value="{{$row['rate']}}" class="form-control" placeholder="@lang('layout.Rate')" />
											</td>
											<td width="50%">
												<div class="input-group">
													<input name="amount[{{$index}}][{{$row['currency']}}]" value="{{round($row['amount'],precision())}}" class="form-control" placeholder="@lang('layout.Amount')" />
													<input type="hidden" name="account_id[{{$index}}][{{$row['currency']}}]" value="{{$row['account_id']}}" />
													<input type="hidden" name="type[{{$index}}][{{$row['currency']}}]" value="{{$row['type']}}" />
													<span class="input-group-addon">
														@lang('layout.'.$row['type'])
													</span>
												</div>
											</td>
										</tr>
										@endforeach
									</table>
								</td>
							</tr>
													</tbody>
					</table>
					<br />
					<br />
					<br />
				</div>
				<!-- <div class="row">
					<button type="button" @click="addNew(100000)" class="btn btn-success"><i class="fa fa-plus"></i></button>
				</div> -->

			</div>

			<div class="col-xs-12 col-sm-10 col-md-11 text-center">
				<button type="button" @click="handleSubmit($event)" class="btn green">@lang('layout.Submit')</button>
				<a href="{{route('closeYearMemberStatement.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
			</div>
			{{Form::close()}}
			<!-- END FORM-->
		</div>
	</div>
</div>

@endsection
@push('scripts')


<script>

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

	Vue.component('modal', {
		template: '#vendor-template'
	})

	Vue.component('modal', {
		template: '#modal-template'

	})

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

	let vu = new Vue({
		el: '#item-service',
		data: {
			category: null,
			brand:'',
            selectedBrand:null,
            closeYear:null,
            site:null,
            sites:'',
            type: 'inventoryPart',
            cost: 1,
            total: 0,
            errorMessage: '',
            showModal: false,
            fieldErrors: [],
            temp_items: [],
            selectedMetric: {},
            senddata: {},
            open_stock_data:'',
			services: [],
		},
		computed: {

			isError: function() {
				var isError = false;
				if (this.cost > 0) {
					isError = true;
				}
				return isError;
			},
			description: function(createElement) {
				this.total = this.cost * this.noHand
			},
			result: function() {
				var total = 0
				var cost = this.cost;

				this.services.forEach(function(item) {
					total += (item.item.qut_in) ? (Number.parseFloat(item.item.qut_in) * ((Number.parseFloat(item.item.cost_in) > 0) ? Number.parseFloat(item.item.cost_in) : 0)) : 0;
				})
				return total;

				// return this.cost * this.onHand;
			},
			onHand: function() {

				var total = 0
				this.services.forEach(function(item) {
					total += (item.item.qut_in) ? (Number.parseFloat(item.item.qut_in)) : 0;
				})
				// console.log('hh',this.services);
				return total;
			}


		},



		mounted: function() {
				this.closeYear = _.find({!!json_encode($closeYear) !!}, (o) => o.id == {{$closeYearMember->year_id}});
			// initialize the selected item
			// for (var i = 0; i < this.open_stock_data.length; i++) {
			// 	this.services.push({
			// 		inventory: this.open_stock_data[i],
			// 		item: this.open_stock_data[i],
			// 		site: this.open_stock_data[i]
			// 	});

			// }

			// console.log('hh',this.services[0].item);

		},

		methods: {

			handleSubmit(e) {
                this.$validator.validate().then(valid => {
                    if (valid) {
                        regForm(e.target);
                    }
                });
            },


			// generic function for adding item to list
			addNew(index) {
				this.setRate();

				if (this.services[index + 1] == undefined) {
					this.services.push({
						item: {
							name: null,
							site: null,
							id: 0,
							inventory_site_id: null,
							main_stocks_id: null,
							m_stocks_in_id: null,
							code: null,
							lengths: null,
							widths: null,
							khada: null,
							// expire_date:null,
							qut_in: null,
							cost_in: null,
							price_in: null,
							m_type: null,
							selectedBrand: null
						},
					});

				}


			},
			// delete item from list
			deleteItem(index) {
				this.setRate();
				this.services.splice(index, 1);

			}


		}



	});

</script>


@endpush