{{\App::setLocale(Session::get('locale'))}}
@extends('user.layout.app')
@section('title', trans('Create Invoice'))
@section('content')
	@includeIf('components.error-success-message')
	 
    <div class="card">
        <div class="card-header"><h4 style="margin-bottom: 0;">@lang('Create Invoice')</h4></div>
		<div class="card-body">
			
			<form id="frmProdSel" method="POST">
				<div class="form-group row">
					<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Stock Item') }}</label>
					<div class="col-md-6">
						<select required class="form-control " id="product_name" name="product_name">
							<option value="">Select Stock Item</option>
							@forelse($stockListObj as $item)
								<option data-stock_name="{{ $item->_code  }}" data-stock_code="{{ $item->_code  }}" data-stock_qty="{{ $item->_qty }}" data-sales_price="{{ $item->_refprice }}" value="{{ $item->_id}}">{{ $item->_code  }}</option>
							@empty
							@endforelse
						</select> 
					</div>
					<div class="col-md-2">
						{{--<img src="{{asset('loader.gif')}}" height="40" style="display:block" id="loader_img">--}}
					</div>
				</div>
				
				<div class="form-group row">
					<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Unit Price') }}</label>
					<div class="col-md-6">
						<input readonly type="text" name="unit_price" id="unit_price" value="1" class="form-control" required>
					</div>
				</div>
				 
				<div class="form-group row">
					<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Quantity') }}</label>
					<div class="col-md-6">
						<input type="text" name="product_qty" id="product_qty" class="form-control" required>
					</div>
				</div>
				
				<div class="form-group row">
					<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Remark') }}</label>
					<div class="col-md-6">
						<textarea class="form-control" rows="2" name="remark" id="remark"></textarea>
					</div>
				</div>
				
				<div class="form-group row mb-0">
					<div class="col-md-8 offset-md-4">
						<button type="submit" class="btn btn-primary">
							{{ __('Add') }}
						</button>
					</div>
				</div>
			</form>
		</div>
		<div class="card-body">		
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title"><h4>List of Items</h4></h3>
				</div>
				<div class="panel-body">
					<div class="table-responsive">
						<form id="frmItemList" method="POST">
							@csrf
							<table id="tblItemList" class="table table-sm">
								<thead>
									<tr>
										<td><strong>Product</strong></td>
										<td><strong>Unit Price</strong></td>
										<td><strong>Quantity</strong></td>
										<td><strong>Total</strong></td>
										<td><strong>Remark</strong></td>
										<td><strong></strong></td>
									</tr>
								</thead>
								<tbody>
								</tbody>
								<tfoot>
									<tr>
										<td class=""></td>
										<td colspan="2" class="tbtitle text-right"><b>Subtotal</b></td>
										<td class=" text-right">
											<input readonly type="text" id="subtotal" value="0" name="subtotal" class="rdonly form-control form-control-sm">
										</td>
										<td class=""></td>
										<td class=""></td>
									</tr>
									<tr>
										<td class=""></td>
										<td colspan="2" class="tbtitle text-right"><strong>Discount</strong></td>
										<td class=" text-right">
											<input type="text" id="discount" value="0" name="discount" class="form-control form-control-sm">
										</td>
										<td class=""></td>
										<td class=""></td>
									</tr>
									<tr>
										<td class=""></td>
										<td colspan="2" class="tbtitle text-right"><strong>Tax</strong></td>
										<td class=" text-right">
											<input type="text" id="tax" value="0" name="tax" class="form-control form-control-sm">
										</td>
										<td class=""></td>
										<td class=""></td>
									</tr>
									<tr>
										<td class=""></td>
										<td colspan="2" class="tbtitle text-right"><strong>Grand Total</strong></td>
										<td class=" text-right">
											<input readonly type="text" id="gtotal" value="0" name="gtotal" class="rdonly form-control form-control-sm">
										</td>
										<td class=""><span class="rdonly form-control form-control-sm">
											({{number_format($creditObj->point,2)}} Point Available)
										</span>
										</td>
										<td class=""></td>
									</tr>
								</tfoot>
							</table>
							<hr/>
							<div class="form-group row">
								<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Payment Method') }}</label>
								<div class="col-md-6">
									<select class="form-control" name="payment_method">
										<option value="320-000" selected>Cash In Hand</option>
										<option value="325-000">Petty Cash</option>
										<option value="310-B01">Boost</option>
										<option value="310-C01">Cheque</option>
										<option value="310-C02">Cash</option>
										<option value="310-D01">Debit/Credit Card</option>
										<option value="310-G01">Grab Pay</option>
										<option value="310-O01">Online Transfer</option>
										<option value="310-R01">Redemption</option>
										<option value="310-S01">Sarawak Pay</option>
									</select>
								</div>
								<div class="col-md-2">
								</div>
							</div>
							<button type="submit" id="save_item" class="btn btn-success pull-right">Save Invoice</button>
						</form>	
					</div>
				</div>
			</div>
		</div>
    </div> 
<style>

</style>	
@endsection
@section('extra-script')
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.css" />
	  
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

	@includeIf('components.sweetalert')
	@includeIf('components.jqvalidate')
	<script>
	$(document).ready(function(){
		$("#product_name").select2();
		/*var baseURL = "{{config('app.api_url')}}Stocks?";
		$.ajax({
			url: baseURL+'$select=id,stockCode,stockName,currentBalance,listPrice,createDate',
			data: {},
			type: "GET",
			beforeSend: function(xhr){
				xhr.setRequestHeader('DbCode', 'LocalDb');
			},
			success: function(respo) { 
				$.each(respo, function(i,item){
					var opHTML = '<option data-stock_name="'+item.stockName+'" data-stock_code="'+item.stockCode+'" data-stock_qty="'+item.currentBalance+'" data-sales_price="'+item.listPrice+'" value="'+item.id+'">'+item.stockName+'</option>';
					$('#product_name').append(opHTML); 
				});
				$("#product_name").select2();
				$("#loader_img").slideUp();
			}
		});*/
	});
					
	$(document).on('click', '.item_remove', function(){ 
		$(this).closest('tr').fadeOut(300, function() { 
			$(this).remove(); 
			updateTotal();
		});
	});
	
	jQuery(function() {
		$('#product_name').change(function(){
			var selected = $(this).find('option:selected');
			stock_qty = selected.data('stock_qty'); 
			sales_price = selected.data('sales_price'); 
			$('#unit_price').val(sales_price);
			$('#product_qty').val(stock_qty);
		});
		
		$('#tblItemList tbody').on('keyup change',function(){
			updateTotal();
		});
		$('#tblItemList tfoot #tax').on('keyup change',function(){
			calculateGrandTotal();
		});
		$('#tblItemList tfoot #discount').on('keyup change',function(){
			calculateGrandTotal();
		});
		var frmProdSel = jQuery("#frmProdSel").validate({
			rules: {
				product_name: {
					required: true,
				},
				unit_price: {
					required: true,
					number: true,  
				},
				product_qty: { 
					required: true,
					digits: true,
					max: function() { 
						d = $('#product_name').find('option:selected').data('stock_qty');
						console.log(d);
						return parseInt(d);
					},
				},
				remark: {
					required: false,
					maxlength: 255, 
				},
			},
			messages: {
				product_name: {
					required: "@lang('Product name required')",
				},
				product_qty: {
					required: "@lang('Quantity required')",
					digits: "@lang('Quantity not allowed with decimal')",
				},
				unit_price: {
					required: "@lang('Amount required')",
				},
			},
			submitHandler: function(event) { 
				var product_name = $("#product_name").find(':selected').data('stock_name');
				var product_code = $("#product_name").find(':selected').data('stock_code');
				var product_id = $("#product_name").val();
				var product_price = $("#unit_price").val();
				var product_qty = $("#product_qty").val();
				var remark = $("#remark").val();
				var product_price_total = product_price*product_qty;
				
				var item_name = '<td><input readonly type="text" value="'+product_name+'" name="item_name[]" class="form-control form-control-sm"><input type="hidden" value="'+product_id+'" name="item_id[]" class="form-control form-control-sm"><input type="hidden" value="'+product_code+'" name="item_code[]"></td>';
				var item_price = '<td><input readonly type="text" value="'+product_price+'" name="item_price[]" class="product_price form-control form-control-sm"></td>';
				var item_qty = '<td><input readonly type="text" value="'+product_qty+'" name="item_qty[]" class="product_qty form-control form-control-sm"></td>';
				var item_price_total = '<td><input readonly type="text" value="'+product_price_total+'" name="item_price_total[]" class="product_price_total form-control form-control-sm"></td>';
				var remark = '<td><textarea readonly class="remark form-control form-control-sm" rows="2" name="remark[]">'+remark+'</textarea></td>';
				var removeButton = '<td class="text-right"><button class="btn btn-danger item_remove btn-sm" type="button">x</button></td>';
				var row = "<tr>"+item_name+item_price+item_qty+item_price_total+remark+removeButton+"</tr>";
				
				$('#tblItemList tbody').append(row);
				
				updateTotal();
				return false;
			}
		}); 
		var v = jQuery("#frmItemList").validate({
			rules: {
				discount: {
					required: true,
					number: true,
				},
				tax: {
					required: true,
					number: true,
				},
				item_name: {
					required: true,
				},
				item_qty: {
					required: true,
					number: true,
				},
				item_price: {
					required: true,
					number: true,
				},
				item_price_total: {
					required: true,
					number: true,
				},
			},
			submitHandler: function(event) {
				itmcount = $('#tblItemList tbody tr').length;
				console.log(itmcount);
				if(itmcount > 0){
					swal({
					  title: "Uploading...",
					  text: "", 
					  button: false,
					  icon: "{{asset('images/ajax-loader-1.gif')}}",
					});
					jQuery.ajax({
						url: '{{ route("user.purchase-api.add.submit") }}',
						type: 'POST',
						data: jQuery('#frmItemList').serialize(),
						success: function(data) {
							if (data.error == 200) {
								swal({
									title: "@lang('word.success')",
									text: data.message,
									type: "success",
								}, function() {
									window.location.reload(true);
								});
							} else {
								swal("@lang('word.error')", data.message, "error");
							}
						}
					});
				}else{
					swal("@lang('word.error')", "Add atleast 1 product item in invoice", "error");
				}	
				return false;
			}
		});
	});
	
function updateTotal() {
    $('#tblItemList tbody tr').each(function(i, element) {
        var html = $(this).html();
        if (html != '') {
            var qty = $(this).find('.product_qty').val();
            var price = $(this).find('.product_price').val();
            $(this).find('.product_price_total').val(qty * price);
        }
    });
	calculateGrandTotal();
}

function calculateGrandTotal() {
    subtotal = 0;
    $('.product_price_total').each(function() {
        subtotal += parseFloat($(this).val());
    });
    $('#subtotal').val(subtotal.toFixed(2));
	var discount_total = parseFloat(subtotal) - parseFloat($('#discount').val());
	var tx = parseFloat($('#tax').val());
	var gtotal = parseFloat(discount_total+tx).toFixed(2);
	$('#gtotal').val(gtotal);
}
</script>
@endsection

@section('extra-style')
<style>
label.error {
	font-size: 12px;
	color: #f00;
}
#tblItemList tbody .form-control {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	
}
#tblItemList tfoot .form-control.rdonly {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	
}
.tbtitle{
	padding: 7px !important;
}
.form-control:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 !important;
}
</style>
@endsection