
@extends('backend.layouts.master')

@section('title', 'Sale')

@push('css')
	
<!-- bootstrap-datetimepicker -->
<link rel="stylesheet" href="{{ asset('myfile/datepicker/zebra_datepicker.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ asset('myfile/datepicker/examples.css') }}" type="text/css">
<style>
	.price {
		/*font-size: 40px;*/
		font-weight: 400;
		color: #26B99A;
		margin: 0
	}
	i.fa.fa-trash.red.fa-lg {
    	cursor: pointer;
	}
	.autocomplete-suggestion:hover{
		background: #817c7c;
		color:white;
	}
	</style>
@endpush
@section('content')
	<div class="right_col" role="main">
        <div class="">
            <div class="page-title">
              
            </div>
            <div class="clearfix"></div>
            <div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>Entry Sale Information</h2>
							<ul class="nav navbar-right panel_toolbox">
							  <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
							  <li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
								<ul class="dropdown-menu" role="menu">
								  <li><a href="#">Settings 1</a>
								  </li>
								  <li><a href="#">Settings 2</a>
								  </li>
								</ul>
							  </li>
							  <li><a class="close-link"><i class="fa fa-close"></i></a>
							  </li>
							</ul>
						<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form id="myForm"  action="{{ route('pos.store')}}" method="POST">
								@csrf
								<div class="row">
									<div class='col-sm-4'>
										<div class="form-group">
											<label>Customer Name</label>
											<input type="text" name="customer_name" id="autocomplete" class="form-control" placeholder="Search Customer" />
											<input type="hidden" name="customer_id" id="customer_id">
										</div>
									</div>
									<div class='col-sm-3'>
										<div class="form-group">
											<label>Address</label>
											<input type="text" class="form-control" id="address" name="customer_address" placeholder=""  value="">
										</div>
									</div>
									<div class='col-sm-3'>
										<div class="form-group">
											<label>Phone</label>
											<input type="text" class="form-control" id="phone" name="customer_phone" placeholder="" value="" >
										</div>
									</div>
									<div class='col-sm-2'>
										<label>Sale Date</label>
										<div class="form-group">
											<input id="datepicker" type="text" name="sale_date" class="form-control" data-zdp_readonly_element="true" value="{{ date('d-m-Y')}}" >
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-4">
										<label>Pudding Name</label>
										<select id="pudding_name" name="product_id[]" class="form-control">
											<option value="">--Select Pudding--</option>
												@foreach($pudding as $pudding)
													<option value="{{ $pudding->id}}">{{ $pudding->product_name}} , ({{ $pudding->now_stock }} {{ $pudding->type}})</option>
												@endforeach
										</select>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label>Quantity</label>
											<input type="text" class="form-control" id="pudding_quantity" name="product_quantity[]" placeholder="" value="" >
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label>Rate</label>
											<input type="text" class="form-control" id="pudding_rate" name="product_rate[]" placeholder="" value="" >
										</div>
									</div>
									<div class="col-sm-2">
										<div class="form-group">
											<label>Total</label>
											<input type="text" class="form-control" id="pudding_total" name="product_total[]" placeholder="" value="" readonly>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-4">
										<label>Vixol Name</label>
										<select id="vixol_name" name="product_id[]" class="form-control">
											<option value="">--Select Vixol--</option>
												@foreach($vixol as $vixol)
													<option value="{{ $vixol->id}}">{{ $vixol->product_name}} , ({{ $vixol->now_stock }} {{ $vixol->type}})</option>
												@endforeach
										</select>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label>Quantity</label>
											<input type="text" class="form-control" id="vixol_quantity" name="product_quantity[]" placeholder="" value="" >
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label>Rate</label>
											<input type="text" class="form-control" id="vixol_rate" name="product_rate[]" placeholder="" value="" >
										</div>
									</div>
									<div class="col-sm-2">
										<div class="form-group">
											<label>Total</label>
											<input type="text" class="form-control" id="vixol_total" name="product_total[]" placeholder="" value="" readonly>
										</div>
									</div>
								</div>
								<div class="card" style="box-shadow:0 0 15px 0 lightgrey;">
									<div class="card-body">
										<hr/>
										<div class="row">
											<div class="col-sm-2"></div>
											<div class="col-sm-2">
												<label>Input Code</label>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<input type="text" class="form-control" name="model_no" placeholder="Input Code" id="bar_code" autofocus autocomplete='off' tabindex="1">
												</div>
											</div>
											<div class="col-sm-2"></div>
										</div>
										<table id="sale" class="table table-bordered table-condensed" align="center" style="width:95%;" >
											<thead>
											  <tr>
												<th>SL</th>
												<th style="text-align:center;">Grade</th>
												<th style="text-align:center;">Type</th>
												<th style="text-align:center;">Code</th>
												<th style="text-align:center;">Stock Piceces</th>
												<th style="text-align:center;">Square Feet</th>
												<th style="text-align:center;">Order Pices</th>
												<th style="text-align:center;">Price</th>
												<th>Total</th>
												<th>Action</th>
											  </tr>
											</thead>
											<tbody id="invoice_item"></tbody>
										</table>
										<br/>
									</div> 
								</div> 
								<p></p>
								<div class="form-group row">
								  <label for="sub_total" class="col-sm-3 col-form-label" align="right">Sub Total</label>
								  <div class="col-sm-6">
									<input type="text" readonly name="sub_total" class="form-control form-control-sm" id="sub_total" required/>
								  </div>
								</div>
								<div class="form-group row">
								  <label for="discount" class="col-sm-3 col-form-label" align="right">Discount</label>
								  <div class="col-sm-6">
									<input type="text" name="discount" class="form-control form-control-sm" id="discount" />
								  </div>
								</div>
								<div class="form-group row">
								  <label for="shiping_cost" class="col-sm-3 col-form-label" align="right">Travel Cost</label>
								  <div class="col-sm-6">
									<input type="text" name="shiping_cost" class="form-control form-control-sm" id="shiping_cost" />
								  </div>
								</div>
								<div class="form-group row">
								  <label for="net_total" class="col-sm-3 col-form-label" align="right">Net Total</label>
								  <div class="col-sm-6">
									<input type="text" readonly name="net_total" class="form-control form-control-sm" id="net_total" />
								  </div>
								</div>
								<div class="form-group row">
								  <label for="paid" class="col-sm-3 col-form-label" align="right">Payment</label>
								  <div class="col-sm-6">
									<input type="text" name="paid" class="form-control form-control-sm" id="paid" value="0">
								  </div>
								</div>
								<div class="form-group row">
								  <label for="due" class="col-sm-3 col-form-label" align="right">Due</label>
								  <div class="col-sm-6">
									<input type="text" readonly name="due" class="form-control form-control-sm" id="due" required/>
								  </div>
								</div>
								<div class="form-group row">
								  <label for="payment_type" class="col-sm-3 col-form-label" align="right">Payment Method</label>
								  <div class="col-sm-6">
									<select name="payment_by" class="form-control form-control-sm" id="payment_type" required/>
									  <option value="Cash">Cash</option>
									  <option value="Card">Card</option>
									  <option value="Draft">Draft</option>
									  <option value="Cheque">Cheque</option>
									</select>
								  </div>
								</div>
								<div class="form-group row">
								  <label for="payment_type" class="col-sm-3 col-form-label" align="right">Sale From</label>
								  <div class="col-sm-6">
									<select name="warehouse_name" class="form-control form-control-sm" id="payment_type" required/>
									  <option value="Navaron">Navaron</option>
									  <option value="Benapol">Benapol</option>
									  
									</select>
								  </div>
								</div>
								<div class="form-group row">
									<label for="note" class="col-sm-3 col-form-label" align="right">Note</label>
									<div calss="col-sm-6">
										<textarea class="form-control form-control-sm" id="note" name="note" ></textarea>
									</div>
								</div>
								<div class="ln_solid"></div>
								<center>
								  <input type="button" id="saveBtn" style="width:150px;" class="btn btn-info" value="Save">
								</center>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
@endsection
@push('js')
	<!-- Jquery Plugin For Date Calender-->
	<script type="text/javascript" src="{{ asset('myfile/datepicker/zebra_datepicker.src.js') }}"></script>
	<script src="{{asset('myfile/jquery/print-page.js')}}"></script>
	<!-- jQuery autocomplete -->
   <script src="{{ asset('myfile/devbridge-autocomplete/dist/jquery.autocomplete.min.js')}}"></script>
   <!--<script src="{{ asset('myfile/typehead/jquery-typeahead.min.js')}}"></script>-->

	<script>
	 	$(document).ready(function(){
	 		
		 	/* date time Picker*/
			$('#datepicker').Zebra_DatePicker({
				format: 'd-m-Y'
			});
			/*-----End Date time picker--------*/
			$('.select2').select2()	
			/*------------customer section--------------*/
			var cs;
			var token = "{{csrf_token()}}";
			$.ajax({
				url: '{{ route('pos.customerList') }}',
				type: 'Get',
				data: {'_token' : token},
				dataType: 'json',
				success: function (response) {
					 cs = response;
					 /*--------call autocomplete function----------*/
					 $('#autocomplete').autocomplete({
					    lookup: cs,
					    onSelect: function (suggestion) {
					       // alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
					        getCustomer(suggestion.id);//call the customer fetails function
					    }
					});
				}
			});
			/*--------get selected customer details-----------*/
			function getCustomer(id){
				$.ajax({
	                url: '{{ route('pos.customerDetail2') }}',
	                type: 'GET',
	                data: {id:id},
	                dataType: 'json',
	                success: function (response) {
	                    $("#customer_id").empty();
	                    $("#phone").empty();
	                    $("#address").empty();
	                    $('#customer_id').val(response.id);
	                    $('#phone').val(response.customer_phone);
	                    $('#address').val(response.customer_address);
	                }
            	});
			}
			/*-------start invoice item add section form barcode machine----------*/
			/*-------------------*/
			var SL = 1;
			$('#bar_code').keydown(function (e) {
		        if (e.keyCode == 13) {
					var id = $('#bar_code').val();
					var token = "{{csrf_token()}}";
					if(id != ''){
						$.ajax({
							url: '{{ route('pos.productDetails') }}',
							type: 'Get',
							data: {id: id, '_token' : token},
							dataType: 'json',
							success: function (response) {
								if(response['id'] == undefined){
									//alert('Woops!, No Product Found')
									console.log(response)
								}else{
									//console.log(response)
										var id = response['id']; 
										var grade_id = response['grade_id']; 					
										var grade = response['grade_name']; 					
										var type_id = response['type_id'];
										var code_id = response['code_id'];
										var type = response['type_name'];
										var code =  response['product_code'];
										var stock =  response['stock_pices'];
										var per_price =  response['per_price'];
										var per_square_feet =  response['per_square_feet'];
										var ordered_quantity =  1;
										var sub_total =  per_price*ordered_quantity;

										$("#sale tbody").append(
											"<tr id='"+id+"'>"
											  +"<td><input type='hidden' name='stock_id[]' value='"+id+"'>"+(SL++)+"</td>"
											  +"<td><input type='hidden' name='grade_id[]' value='"+grade_id+"' />"+grade+" </td>"
											  +"<td><input type='hidden' name='type_id[]' value='"+type_id+"' />"+type+" </td>"
											  +"<td><input id='' type='hidden' name='code_id[]' value='"+code_id+"' size='10'/>"+code+"</td>"
											  +"<td><input  type='hidden' id='"+id+"_stock' name='stock[]' class='tqty' value='"+stock+"' size='10'/>"+stock+"</td>"
											  +"<td><input type='text' id='"+id+"_ordered_quantity' class='qty square_feet' name='square_feet[]' min='1' value='' size='10' /></td>"
											  +"<td><input type='text' id='"+id+"_ordered_quantity' class='order_pices' name='order_pices[]' min='1' value='' size='10' /></td>"
											  +"<td>"
												  +"<input type='text' id='"+id+"_price' class='price' name='price[]' value='' size='10'>"
												  +"<input name='per_square_feet[]' type='hidden' class='per_square_feet' value='"+per_square_feet+"'>"
											  +"</td>"
											  +"<td class='amt' id='"+id+"_sub_total'>"+sub_total+"</td>"
											  +"<td class='text-center'><i class=' fa fa-trash red fa-lg'></i></td>"
											+"</tr>");
										/*---------empty the input field---------*/
										$('#bar_code').val('');
										$('#bar_code').focus();
									}
								}
						});
					}
				}
			}); 
			/*-----------------*/
			$(document).on('click','.fa-trash',function(){
	            var id = $(this).parent().parent().attr('id');
	            $('#'+id).remove();
	        });
			/*--------for vixol & pudding---*/
			$("#pudding_quantity").keyup(function(){
				var pudding = $('#pudding_name').val();
				if(pudding == '')
					{
						alert('Please select Pudding name at first!')
					}
				else{
					var pudding_quantity = $(this).val();
					var pudding_per_rate = $("#pudding_rate").val();
					var total_price_pudding = pudding_quantity * pudding_per_rate;
					$('#pudding_total').val(total_price_pudding);
					//calculate(discount,0,shiping_cost);
				}
			})
			$("#pudding_rate").keyup(function(){
				var pudding_per_rate = $(this).val();
				var pudding_quantity = $("#pudding_quantity").val();
				var total_price_pudding = pudding_quantity * pudding_per_rate;
				$('#pudding_total').val(total_price_pudding);
				//calculate(discount,0,shiping_cost);
			})
			$("#vixol_quantity").keyup(function()
			{
				var vixol = $('#vixol_name').val();
				if(vixol == '')
					{
						alert('Please select vixol name at first!')
					}
				else{
					var vixol_quantity = $(this).val();
					var vixol_per_rate = $("#vixol_rate").val();
					var total_price_vixol = vixol_quantity * vixol_per_rate;
					$('#vixol_total').val(total_price_vixol);
					
					calculate(0,0,0);
				}
			})
			$("#vixol_rate").keyup(function(){
				var vixol_per_rate = $(this).val();
				var vixol_quantity = $("#vixol_quantity").val();
				var total_price_vixol = vixol_per_rate * vixol_quantity;
				$('#vixol_total').val(total_price_vixol);
				
				calculate(0,0,0);
			})
			/*---end vixol& pudding--*/
			$("#invoice_item").delegate('.price', 'keyup', function() {
				$(this).closest('tr').find(".amt").html($(this).closest('tr').find(".qty").val() * $(this).closest('tr').find(".price").val());
				calculate(0,0,0);
			})
			$("#invoice_item").delegate('.square_feet', 'keyup', function() {
				var order_square_feet = $(this).val();
				var total_pices = order_square_feet / $(this).closest('tr').find('.per_square_feet').val();
				$(this).closest('tr').find('.order_pices').val(total_pices);
				//calculate(0,0,0);
			})
			$("#invoice_item").delegate('.order_pices', 'keyup', function(){
				var pices = $(this).val();
				var square_feet = pices * $(this).closest('tr').find('.per_square_feet').val();
				$(this).closest('tr').find('.square_feet').val(square_feet);
				//calculate(0,0,0);
			})
			$("#invoice_item").delegate(".qty","keyup",function(){
				var qty = $(this);
				var tr = $(this).parent().parent();
				if (isNaN(qty.val())) {
					alert("Please enter a valid quantity");
					qty.val(1);
				}else{
					if ((qty.val() - 0) > (tr.find(".tqty").val()-0)) {
						alert("Sorry ! This much of quantity is not available");
						aty.val(1);
					}else{
						tr.find(".amt").html(qty.val() * tr.find(".price").val());
						calculate(0,0,0);
					}
				}
			})
			function calculate(dis,paid,ship){
				var pudding_total = $("#pudding_total").val() || 0;
				var vixol_total = $("#vixol_total").val() || 0;
				var sub_total = 0;
				var gst = 0;
				var net_total = 0;
				var discount = dis;
				var shiping_cost = ship;
				//alert(shiping_cost)
				var paid_amt = paid || 0;
				var due = 0;
				$(".amt").each(function(){
					sub_total = sub_total + ($(this).html() * 1);
				})
				gst = 0 * sub_total;
				net_total = gst + sub_total + parseInt(pudding_total) + parseInt(vixol_total);
				net_total = net_total - discount;
				net_total = net_total + parseInt(shiping_cost);
				//alert(shiping_cost)
				//alert(net_total)
				due = net_total - paid_amt;
				$("#gst").val(gst);
				$("#sub_total").val(sub_total);

				$("#discount").val(discount);
				$("#shiping_cost").val(shiping_cost);
				$("#net_total").val(net_total);
				//$("#paid")
				$("#due").val(due);
			}
			$("#discount").keyup(function(){
				var discount = $(this).val();
				var shiping_cost = $("#shiping_cost").val();
				calculate(discount,0,shiping_cost);
			})
			$("#shiping_cost").keyup(function(){
				var shiping_cost = $(this).val();
				var discount = $("#discount").val();
				calculate(discount,0,shiping_cost);
			})
			$("#paid").keyup(function(){
				var paid = $(this).val();
				var discount = $("#discount").val();
				var shiping_cost = $("#shiping_cost").val();
				calculate(discount,paid,shiping_cost);
			});
			/*-----------------*/
		});
		/*--------form submit section-------------*/
		$(document).on('click','#saveBtn',function(){
			var customer = $("#customer_name").val();
			var payment = $("#paid").val();
			if(customer != '' && payment != ''){
				$("#myForm").submit();
			}
			else{
				alert('Please Input Customer and payment')
			}
		})
	
    	/******/
		function printDiv2(divName) {
		    var printContents = document.getElementById(divName).innerHTML;
		    var originalContents = document.body.innerHTML;
		    document.body.innerHTML = printContents;
		    window.print();
		    document.body.innerHTML = originalContents;
		}
    </script>
@endpush
