@extends('layouts.layout')

@section('body_class', 'nav-md')

@section('body_content')
<div class="container body">
	<div class="main_container">
		@include('includes.sidebar')
		<div class="right_col" role="main">
			<div class="page-title">
				<div class="title_left">
					<h3>Sales Order SKU List</h3>
				</div>
				<div class="clearfix"></div>
			</div>

			<div class="row">
				<div class="col-xs-12">
					<ol class="breadcrumb">
						<li><a href="{{ url('/dashboard') }}">Home</a></li>
						<li><a href="{{ url('/sales_order') }}">Sales Order</a></li>
						<li class="active">List</li>
					</ol>
				</div>

				<div class="col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>Filter</h2>
							<ul class="nav navbar-right panel_toolbox">
								<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
							</ul>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form id="form_filter" class="form-horizontal">
								<div class="form-group">
									<label class="col-sm-2 control-label">Keyword</label>
									<div class="col-sm-10">
										<input id="find" name="find" class="form-control" placeholder="Find by SKU Code, Product Name" @if(!empty($_GET['find'])) value="{{ $_GET['find'] }}" @endif autocomplete="off" required>
									</div>
								</div>

								<div class="form-group">
									<div class="col-xs-4 col-xs-offset-2 col-sm-2 col-sm-offset-2">
										<input type="submit" class="form-control" value="Find">
									</div>
									<div class="col-xs-4 col-sm-2"><input type="button" id="btnAdd" class="form-control" value="Add"/></div>
								</div>

							</form>
						</div>
					</div>
				</div>

				<div class="col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>Sales Order - SKU List</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table id="table_sku" class="table table-striped table-hover">
								<thead>
									<tr>
										<th class="text-center">No.</th>
										<th class="text-center">SKU Code</th>
										<th class="text-center">Product Name</th>
										<th class="text-center">Type</th>
										<th class="text-center">Value</th>
									</tr>
								</thead>
								<tbody>
								@foreach($sku as $idx => $item)
								<tr>
									<td class="text-center">{{ $idx+1 }}</td>
									<td>{{ $item->sku }}</td>
									<td>{{ $item->product_name }}</td>
									<td class="text-center">@if($item->type==1) <span class="label label-info"> Voucher Nominal</span>
										@elseif($item->type==2) <span class="label label-success"> Voucher Gramasi</span>
										@elseif($item->type==3) <span class="label label-default">LM</span> @endif</td>
									<td class="text-right">@if($item->type==1) Rp. @endif {{ number_format($item->price, ($item->price < 1 ? 1 : 0), ',', '.') }} @if(in_array($item->type, [2, 3])) gr @endif</td>
								</tr>
								@endforeach
								<tr>
									<td colspan="8" class="text-center">{{ $sku->appends(['rpp' => @$_GET['rpp'], 'find' => @$_GET['find']])->links() }}</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		@include('includes.footer')
	</div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.0.7/cleave.min.js"></script>
<script>
	$(function(){
		var prod_type = {!! json_encode($sku_type) !!};
		$(".fa-bars").trigger("click");
		$("#find").select();
		$("#btnAdd").click(function(){// $("table tbody tr[class!='new'] td:nth-child(1)").css("border", "1px solid red");
			if($("tr.new").length<5) {
				$($("<tr>").attr({"class":"new"})
					.append($("<td>").attr({"class":"text-center"}).html("*"))
					.append($("<td>").append($("<input>").attr({"name":"skuCode[]", "class":"form-control", "placeholder":"SKU Code"})))
					.append($("<td>").append($("<input>").attr({"name":"productName[]", "class":"form-control", "placeholder":"Product Name"})))
					.append($("<td>").append($("<select>").attr({"name":"productType[]", "class":"form-control"})))
					.append($("<td>").append(
						$("<div>").attr({"class":"form-inline"}).append($("<div>").attr({"class":"form-group"}).append($("<input>").attr({"name":"skuValue[]", "class":"form-control text-right", "maxlength": 12, "width": 200}))).append($("<a>").attr({"class":"btn btn-default btn-del","style":"margin:0px -40px 0 5px"}).html(" - ")))))
					.insertBefore($("table tbody tr[class!='new'] td:nth-child(1)").first().parent());
				if($("#form_sku").length == 0) $("#table_sku").wrap($("<form>").attr({"id":"form_sku", "method":"post", "onsubmit":"return save_sku()"}));

				if($("option", $("select[name^='productType']").last()).length == 0) {
					$("select[name^='productType']").last().append($("<option>").attr("value", "").html("--- Select Type ---"));
					for(key in prod_type) {
						$("select[name^='productType']").last().append($("<option>").attr("value", `${key}`).html(`${prod_type[key]}`));
					}
				}
				new Cleave($("input[name^='skuValue']").last(), {numeral: true, numeralThousandsGroupStyle: "thousand"});
				$("input[name^='skuCode']").last().focus();
				$(".btn-del").last().click(function(){
					delete_row = false;
					if($(":input", $(this).parents("tr")).map(function(){return $.trim($(this).val());}).get().join("")!="") {
						if(confirm("Delete `"+$(":input", $(this).parents("tr")).eq(1).val()+"`?")) delete_row = true;
					} else delete_row = true;
					if(delete_row !== false) $(this).parents("tr").remove();
					if($(":input", "#form_sku").length == 0) {
						var cnt = $("#form_sku").contents();
						$(".btn-save").remove();
						$("#form_sku").replaceWith(cnt);
					}
				});
				$("input[name^='skuCode']").last().keypress(function(e){return (e.keyCode==32 ? false : true);}).bind("paste", function(e){
					if(e.type=='paste') {var pastedData = e.originalEvent.clipboardData.getData("text").replace(/ /g,"");$(this).val(pastedData);return false;}
				}).bind("drop", function(e){$(this).val(e.originalEvent.dataTransfer.getData("text").replace(/ /g,""));return false;});
			}
			if($("input[name^='skuCode']").length > 0 && $("h2:contains('Sales Order - SKU List') .btn-save").length == 0) $("h2:contains('Sales Order - SKU List')").append($("<a>").attr({"class":"btn btn-primary btn-xs pull-right btn-save"}).html("Save"));
		});

		$("h2").on("click", ".btn-save", function(){$("#form_sku").submit();});

		$("#form_sku").submit(function(){return save_sku();});
		@if(empty($_GET['find'])) $("#find").val(""); @endif
	});

	function save_sku() {// console.log($("#form_sku").serialize());
			$(".btn-save").hide().after($("<i>").attr({"class":"fa fa-spin fa-spinner pull-right"}));
			if($(".alert-danger", $("#form_sku").parent()).length==1) $(".alert-danger", $("#form_sku").parent()).remove();

			$.ajax({
				url:"{{ url("sales_order/save_sku") }}",
				method:"POST",
				headers:{"X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr("content")},
				data:new FormData($("#form_sku")[0]),
				contentType: false,
				processData: false
			}).done(function(a){
				if(a.err==0 && $(".alert-success", $("#form_sku").parent()).length==0) {
					$("<div>").attr({"class":"alert alert-success alert-dismissable"}).html(a.msg+". Page will reload in 3s").prepend($("<button>").attr({"class":"close","data-dismiss":"alert","aria-label":"Close"}).append($("<span>").html("&times;"))).insertBefore($("#form_sku"));
				}
				$(".btn-save").next().remove();$(".btn-save").remove();
				setTimeout(function(){window.location.reload();}, 3000);
			})
			.error(function(a){
				resp = a.responseJSON;
				if(resp.err!=0 && $(".alert-danger", $("#form_sku").parent()).length==0) {
					$("<div>").attr({"class":"alert alert-danger alert-dismissable"}).html(resp.msg).prepend($("<button>").attr({"class":"close","data-dismiss":"alert","aria-label":"Close"}).append($("<span>").html("&times;"))).insertBefore($("#form_sku"));
				}
				$(".btn-save").show().next().remove();
			});

			return false;
		}
</script>
@endsection