@extends('layouts.form')

@section('title', trans('menu.dcnote_' . $note_type))

@section('action', route('dcnote.save'))

@section('content_form')
<div class="row">
	<div class="col-md-12 col-12" >
		<div id="vueAppDCNote" >
			<button type="button" class="btn btn-sm btn-primary mb-2" v-on:click="addRow" >เพิ่มรายละเอียด</button>
			<table class="table" >
				<thead>
					<tr>
						<th class="text-center" style="width: 5%;" >ลบ</th>
						<th class="text-center" style="width: 35%;" >รายละเอียด</th>
						<th class="text-center" style="width: 20%;" >จำนวน</th>
						<th class="text-center" style="width: 20%;" >หน่วยละ</th>
						<th class="text-center" style="width: 20%;" >จำนวนเงิน</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, index) in list" >
						<td class="text-center" >
							<button type="button" class="btn btn-sm btn-danger" v-on:click="deleteRow(index)" ><i class="fa fa-times" ></i></button>
						</td>
						<td>
							<input type="text" class="form-control form-control-sm" name="detail[]" v-model="item.detail" >
						</td>
						<td>
							<input type="number" class="form-control form-control-sm text-right" name="qty[]" v-model="item.qty" v-on:change="updatetable" >
						</td>
						<td>
							<input type="number" class="form-control form-control-sm text-right" name="price[]" v-model="item.price" v-on:change="updatetable" >
						</td>
						<td class="text-right" >@{{ item.total }}</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="4" class="text-right" >รวม</td>
						<td colspan="1" class="text-right" >@{{ table_subtotal }}</td>
					</tr>
					<tr>
						<td colspan="4" class="text-right" >หักส่วนลด</td>
						<td colspan="1" class="text-right" >
							<input type="number" class="form-control form-control-sm text-right" name="table_discount" v-model="table_discount" v-on:change="updatetable" >
						</td>
					</tr>
					<tr>
						<td colspan="4" class="text-right" >จำนวนเงินหลังหักส่วนลด</td>
						<td colspan="1" class="text-right" >@{{ table_total }}</td>
					</tr>
					<tr>
						<td colspan="4" class="text-right" >มูลค่าตามใบกำกับภาษี</td>
						<td colspan="1" class="text-right" >@{{ order_total }}</td>
					</tr>
					<tr>
						<td colspan="4" class="text-right" >มูลค่าที่ถูกต้อง</td>
						<td colspan="1" class="text-right" >@{{ sub_total }}</td>
					</tr>
					<tr>
						<td colspan="4" class="text-right" >ผลต่าง</td>
						<td colspan="1" class="text-right" >@{{ diff_total }}</td>
					</tr>
					<tr>
						<td colspan="4" class="text-right" >ภาษีมูลค่าเพิ่ม</td>
						<td colspan="1" class="text-right" >
							<input type="number" class="form-control form-control-sm text-right" name="table_vat" v-model="table_vat" v-on:change="updatetable" >
						</td>
					</tr>
					<tr>
						<td colspan="4" class="text-right" >รวมทั้งสิ้น</td>
						<td colspan="1" class="text-right" >@{{ table_total_inc_vat }}</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>
	{!! form_hidden('id', $d->id) !!}
	{!! form_hidden('note_type', $d->note_type) !!}
	{!! form_hidden('order_id', $d->order_id) !!}
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	$(document).ready(function(){
		var order_total_inc_vat = parseFloat("{{ $order_total_inc_vat }}");
		var vueAppDCNote = new Vue({
			el: '#vueAppDCNote',
			data: {
				list: @json($trans),
				table_subtotal: 0,
				table_discount: 0,
				table_total: 0,
				order_total: order_total_inc_vat,
				sub_total: 0,
				diff_total: 0,
				vat: 0,
				table_total_inc_vat: 0,
				table_vat: 0
			},
			methods: {
				addRow: function(){
					this.list.push({
						id: 0,
						detail: '',
						qty: 1,
						price: 0,
						total: 0
					});
				},
				updatetable: function(){
					var _this = this;
					this.table_subtotal = 0;
					this.table_total = 0;
					this.list.forEach(function(item){
						item.total = parseFloat(item.qty) * parseFloat(item.price);
						_this.table_subtotal += item.total;
					});
					this.table_discount = parseFloat(this.table_discount);
					this.table_total = this.table_subtotal - this.table_discount;

					this.sub_total = this.order_total + this.table_total;
					if ("{{ $note_type }}" == "{{ CREDIT_NOTE }}") {
						this.sub_total = this.order_total - this.table_total;
					}
					this.sub_total = parseFloat(this.sub_total.toFixed(2));
					this.diff_total = Math.abs(this.order_total - this.sub_total);
					this.table_total_inc_vat = this.diff_total + parseFloat(this.table_vat);
				},
				deleteRow: function(index) {
					this.list.splice(index, 1);
				}
			}
		});
		vueAppDCNote.table_discount = parseFloat("{{ floatval($d->discount) }}");
		vueAppDCNote.table_vat = parseFloat("{{ floatval($d->vat) }}");
		vueAppDCNote.updatetable();
	});
</script>
@endpush