@extends('layouts.backend')

@section('title', 'Import Bill')

@section('breadcrumb', (isset($title) ? $title : 'No Title'))

@section('content')

<form method="POST" action="{{ route('stock-save-import') }}" id="form_product_material" >

@block(trans("stockbill.bill_detail"))
	@if(in_array($d->status, [STATUS_INACTIVE, STATUS_DELETE]))
		{!! HTMLRender::formText('bill_no', $d->bill_no, trans('stock.bill_no') . trans('lang.field_required')) !!}
		{{-- {!! HTMLRender::formText('supplier_name', $d->supplier_name, trans('stock.supplier_name')) !!} --}}
		{!! HTMLRender::formSelect('supplier_id', trans('stock.supplier_name'), $suppliers, $d->supplier_id, ['span' => false, 'select2' => true, 'firstrow' => true]) !!}
		{!! HTMLRender::formHidden('id', $d->id) !!}
		@if(!empty($d->reject_reason))
		{!! HTMLRender::formLabel(trans('stockbill.reject_reason'), $d->reject_reason) !!}
		@endif
		{!! HTMLRender::button('btn-save', 'btn-save', trans('stock.save')) !!}
	@else
		{!! HTMLRender::formLabel(trans('stockbill.bill_no'), $d->bill_no) !!}
		{!! HTMLRender::formLabel(trans('stockbill.supplier_name'), $d->supplier_name) !!}
	@endif

@endblock

@if(in_array($d->status, [STATUS_INACTIVE, STATUS_DELETE]))
@block(trans("stock.add_block"))

	{!! HTMLRender::formErrors() !!}

	{!! HTMLRender::formSelect('material_id_add', trans('stock.material'), $materials) !!}
	{!! HTMLRender::formNumber('amount', null, trans('stock.amount') . trans('lang.field_required')) !!}
	{!! HTMLRender::formNumber('price', null, trans('stock.price') . trans('lang.field_required')) !!}
	{!! HTMLRender::formText('remark', null, trans('stock.remark')) !!}
	{!! HTMLRender::button('btn-add', 'btn-add', trans('stock.add')) !!}

	{{ csrf_field() }}

@endblock
@endif

@block(trans("stock.transaction"))

<table class="table table-striped table-bordered table-vcenter" >
	<thead class="thead-light" >
		<tr>
			<th>{{ trans('stock.material') }}</th>
			<th>{{ trans('stock.amount') }}</th>
			<th>{{ trans('stock.price') }}</th>
			<th>{{ trans('stock.remark') }}</th>
			@if(in_array($d->status, [STATUS_INACTIVE, STATUS_DELETE]))
			<th>{{ trans('lang.delete') }}</th>
			@endif
		</tr>
	</thead>
	<tbody id="table-stock-add" >
		<tr v-for="(item, index) in list" >
			<td>@{{ item.material_name }}</td>
			<td>@{{ item.amount }}</td>
			<td>@{{ item.price }}</td>
			<td>@{{ item.remark }}</td>
			@if(in_array($d->status, [STATUS_INACTIVE, STATUS_DELETE]))
			<td><button type="button" class="btn btn-sm btn-danger btn-del-row" v-bind:data-index="index" >{{ trans('lang.delete') }}</button></td>
			@endif
			<input type="hidden" name="material_id[]" v-bind:value="item.material_id" >
			<input type="hidden" name="amount[]" v-bind:value="item.amount" >
			<input type="hidden" name="price[]" v-bind:value="item.price" >
			<input type="hidden" name="remark[]" v-bind:value="item.remark" >
		</tr>
	</tbody>
</table>

@endblock

</form>

@endsection

@section('css')
<link rel="stylesheet" href="assets/js/plugins/select2/css/select2.min.css" />
<link rel="stylesheet" href="assets/js/plugins/sweetalert2/sweetalert2.min.css" />
@endsection

@section('script')
<script src="packages/handlebars/handlebars.min.js"></script>
<script src="assets/js/plugins/select2/js/select2.full.min.js"></script>
<script src="assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="{{ asset('js/vue.js') }}"></script>

<script>
$(document).ready(function () {
	(function ($) {

		var vueApp = new Vue({
			el: '#table-stock-add',
			data: {
				list: @json($transactions)
			},
		});

		$('#material_id_add').select2({
			placeholder: 'Select an option'
		});

		$('#supplier_id').select2({
			placeholder: 'Select an option'
		});

		$(".btn-add").on("click", function(){
			$.post("rb-admin/stock-import-add", {
				_token: $('meta[name="csrf-token"]').attr('content'),
				material_id: $("#material_id_add").val(),
				amount: $("#amount").val(),
				price: $("#price").val(),
				remark: $("#remark").val(),
			}, function(res){
				console.log('res', res);
				if (res.status) {
					var context = {
						material_name: res.material_name,
						material_id: res.material_id,
						amount: res.amount,
						price: res.price,
						remark: res.remark,
					};
					vueApp.list.push(context);
				} else {
					if (res.message) {
						alert(res.message);
					}
				}
			}, 'json');
		});

		$(".btn-save").on("click", function(){
			rb_confirm({
				title: 'ยืนยัน',
				text: 'ยืนยันการส่งข้อมูล',
				confirm_text: 'ตกลง',
				cancel_text: 'ยกเลิก',
				type: 'warning'
			}, function(e){
				if (e.value) {
					$.post("rb-admin/stock-save-import", $("#form_product_material").serialize(), function(res){
						console.log('res', res);
						window.location.reload();
					}, 'json').fail(function(res){
						console.log("res err", res);
						alert(res.responseJSON.message);
					});
				}
			});
		});

		$(document).on("click", ".btn-del-row", function(){
			//$(this).parents('tr').remove();
			var index = parseInt($(this).attr("data-index"), 10);
			vueApp.list.splice(index, 1);
		});

	})(jQuery);
});

</script>

@endsection