
<style type="text/css">
	#LoadingOrderTable thead tr th {
		color:#555;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	#LoadingOrderTable tbody tr td input{
		width:100%;
		margin:0;
		border: 1px solid rgba(0,0,0,0.02);
		background-color:#e5e5e5;
	}
	#LoadingOrderTable tbody tr td {
		border:0;
		padding:3px 1px;
		position:relative;
	}
	#LoadingOrderTable tbody tr:first-child td{
		padding-top:10px;
	}
	#InvoiceDiscountInput{
		display: inline-block;
		width: 40px;
		padding: 3px;
		line-height: 20px;
		background: rgb(250, 250, 250);
		min-height: 12px;
		text-align: center;
		height: 25px;
		font-size: 12px;
		top: -2px;
		position: relative;
		margin: 0 3px;
	}
	#LoadingOrderTable .Hint{
		position: absolute;
		font-size: 10px;
		font-weight: bold;
		height: 20px;
		line-height: 20px;
		bottom: 2px;
		right: 4px;
		color: rgb(153, 153, 153);
	}
	#LoadingOrderTable .TotalTD{
		width: auto;
		display: inline-block;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
	}
	#LoadingOrderTable .Disc{
		width:70px;
	}
	#LoadingOrderTable input.wrong{
		border: 1px solid rgba(255, 0, 0, 0.2);
		background: rgba(255, 0, 0, 0.05);
		/*        width:100%;*/
	}
	.DropDownForForms > .dropdown-menu{
		width:100%;
		height:200px;
		max-height:200px;
		overflow-y:scroll;
	}
	.DropDownForForms > .dropdown-menu{
		height:auto;
		cursor: pointer;
		overflow-y:auto;
	}
	.DropDownForForms > button{
		position:relative;
		z-index:999;
	}
	.DropDownForForms > button > input{
		position: absolute;
		left:5;
		top: 0;
		width:90%;
		cursor: pointer;
		-webkit-user-select:none;
		-moz-user-select:none;
		user-select:none;
		padding: 0;
		border: 0;
		background: transparent;
	}
	.Disabled{
		cursor:default;
		opacity:0.5;
	}
	#AdvanceValue{
		width: 102px;
		display: inline-block;
	}
	.datepicker thead tr .dow {
		color:#4c0870!important;
	}
	.datepicker table tr td.day:hover {
		background: #4c0870!important;
		color:#fff;
	}
	.datepicker table tr td.active {
		background-color: #4c0870!important;
	}
	.datepicker thead tr .datepicker-switch {
		color: #4c0870 !important;
		font-size: 13px;
	}
	.datepicker table tr td span.active {
		background-color: #4c0870!important;
	}
	.datepicker table tr td span:hover {
		background-color: #4c0870!important;
		color:#fff;
	}
	datepicker thead tr .next:before, .datepicker thead tr .prev:before {
		color: #4c0870!important;
		font-family: 'FontAwesome';
		font-size: 10px;
	}
	.datepicker thead tr .next:before, .datepicker thead tr .prev:before {
		color: #4c0870!important;
		font-family: 'FontAwesome';
		font-size: 10px;
	}
	.select2-container > .select2-choice{
		background-color: #e5e5e5;
		width: 165px;
	}
	.InputSpinner{
		width: 60px;
	}
	.InputSpinner > .form-control{
		border-color: rgb(221, 221, 221);
		height:36px;
		margin:0;
		padding:0;
		text-align: center;
		/*
		-webkit-border-radius: 3px 0px 0px 3px !important;
		-moz-border-radius: 3px 0px 0px 3px !important;
		border-radius: 3px 0px 0px 3px !important;
		*/
	}
	.InputSpinner > .input-group-btn-vertical {
		position: relative;
		white-space: nowrap;
		width: 25px;
		vertical-align: middle;
		display: table-cell;
	}
	.InputSpinner > .input-group-btn-vertical > .btn {
		height:19px;
		display: block;
		float: none;
		width: 100%;
		max-width: 100%;
		padding: 8px;
		margin-left: -1px;
		position: relative;
		border-radius: 0;
	}
	.InputSpinner > .input-group-btn-vertical > .btn:first-child {
		border-top-right-radius: 4px;
	}
	.InputSpinner > .input-group-btn-vertical > .btn:last-child {
		margin-top: -2px;
		border-bottom-right-radius: 4px;
	}
	.InputSpinner > .input-group-btn-vertical i{
		position: absolute;
		top: 50%;
		left: 6px;
		margin-top:-9px;
		font-size: 18px;
	}
	.InputSpinner .input-group-btn-vertical .btn.btn-default{
		font-size: 10px;
		padding: 6px 10px;
	}
	.select2-results .select2-disabled {
		background: #ed9421 ;
		color:#fff;
	}
	/*
	.NameCenter{
	margin-left: 60px;
	}
	*/
	#LoadingOrderTable tbody >tr>td >div.Arrow{
		cursor:pointer;
	}
	#LoadingOrderTable tbody >tr>td >div.Arrow:before{
		content: "\f054";
		display: inline-block;
		margin-right: 8px;
		font-family: 'FontAwesome';
		-webkit-transition: all 0.12s linear;
		transition: all 0.12s linear;
	}
	#LoadingOrderTable tbody >tr.shown>td >div.Arrow:before {
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	#LoadingOrderTable_filter,#LoadingOrderTable_length{
		visibility: hidden;
	}
	.select2-choice {
		width: 220px;
	}
	#TruckSelect .select2-container,#ClassSelect .select2-container{
		width:165px;
	}
	.dataTables_length{
		margin-left:6px;
	}
	.container-sm-height{
		margin-left:-14px;
	}
</style>
<script src="<?php echo THEME_PATH; ?>plugins/jquery-validation/js/jquery.validate.min.js"></script>
<div id="PurchaseDisabler" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:2099;display:none"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>
<form method="POST" action="" onsubmit="return false" id="OrderForm">
	<div class="container-fluid container-fixed-lg">
		<div class="panel panel-default">
			<div class="panel-body">
				<div id="LoadingOrderSuccess" class="hidden"></div>
				<div class="invoice padding-50 sm-padding-10">
					<div class="container-sm-height">
						<div class="row-sm-height">
							<div class="col-md-9 col-sm-height sm-no-padding">
								<h2 class="font-montserrat all-caps hint-text"><?php print CommonLanguage::getMessage('loading_order');?></h2>
								<div>
									<div class="input-group  col-md-8 center-margin pull-left" style="margin-left: -16px;">
										<div class="col-md-5" id="TruckSelect">    
											<select id="Truck_ID"  name="Truck_ID"  data-init-plugin="select2">
												<option value=''><?php print CommonLanguage::getMessage('select_truck');?></option>
												<?php foreach ($all_vehicles as $vehicle):
												if($vehicle['Is_Load'] == 2 ){
												?>
												<option value="<?php echo $vehicle['Vehicle_ID']; ?>" disabled="disabled" ><?php echo $vehicle['Vehicle_Registration_Number'] .' - '.$vehicle['Zone_Name'].' '.CommonLanguage::getMessage('loaded_status').' '.$vehicle['LoadID']  ;?></option>
												<?php } else{  ?>
												<option value="<?php echo $vehicle['Vehicle_ID']; ?>" ><?php echo $vehicle['Vehicle_Registration_Number'] .' - '.$vehicle['Zone_Name'] ;?></option>
												<?php }endforeach; ?>
											</select>
										</div>
										<div class="col-md-5" id="ClassSelect">
											<select id="Class_ID"  name="Class_ID"  data-init-plugin="select2">
												<option value=''><?php print CommonLanguage::getMessage('select_class');?></option>
												<?php foreach ($classes as $class):?>
												<option value="<?php echo $class['Class_ID']; ?>" ><?php echo $class['Class_Name']   ;?></option>
												<?php endforeach; ?>
											</select>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-6 ">
									<input type="hidden" name="Zone_ID" id="Zone_ID" />
									<input type="hidden" name="DriverID" id="DriverID" />
									<input type="hidden" name="SalesManID" id="SalesManID" />
									<div id="TruckInfoContent">
									</div>
								</div>
							</div>
							<div class="col-md-4 col-sm-height col-bottom sm-no-padding sm-p-b-20" style="vertical-align: top;">
								<div class="sm-m-t-20">
									<h4><?php print CommonLanguage::getMessage('loading_order');?> # <span id="Load_Order_ID"><?php if(empty($max_order_id)){echo 1;}else{echo $max_order_id+1;} ?></span></h4>
								</div>
								<div  class="form-group form-group-default input-group">
									<label><?php print CommonLanguage::getMessage('Date');?></label>
									<input id="LoadingInvoiceDate" name="LoadingInvoiceDate" class="form-control" value="<?php echo ($today); ?>" />
									<span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
								</div>
								<br>
							</div>
						</div>
					</div>
					<div>
						<div class="clearfix"></div>
					</div>
					<div class="table-responsive">
						<div ID="LoadingItemTableLoader" style="display:none;position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:999"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>
						<table class="table m-t-50" id='LoadingOrderTable'>
							<thead>
								<tr>
									<th class="text-center"> <?php print CommonLanguage::getMessage('order');?> #</th>
									<th class="text-center"> <?php print CommonLanguage::getMessage('customer');?> </th>
									<th class="text-center"> <?php print CommonLanguage::getMessage('sales_order_date');?> </th>
									<th class="text-center"> <?php print CommonLanguage::getMessage('assign_to_truck');?></th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
					<br>
					<div class="container-sm-height" >
						<button class=" btn btn-primary btn-cons m-b-10 pull-right disabled"  id="LoadOrderSubmitButton" style="padding-top: 10px;top: 20px;min-width:253px;" type="button"><i class="pg-form"></i> <span class="bold"><?php print CommonLanguage::getMessage('Save');?></span></button>
					</div>
					<hr>
					<div>
						<span class="m-l-20 text-black sm-pull-right"><?php echo $org_details[0]['Organization_Legal_Name']; ?></span>
						<span class="m-l-20 text-black sm-pull-right"><?php echo $org_details[0]['Organization_Province']; ?> <?php echo $org_details[0]['Organization_Country']; ?> - <?php echo $org_details[0]['Organization_City']; ?></span>
						<span class="m-l-20 text-black sm-pull-right">CR: <?php echo $org_details[0]['Organization_Commercial_Registry']; ?></span>
						<span class="m-l-20 text-black sm-pull-right"><?php print CommonLanguage::getMessage('Phone');?>: <?php echo $org_details[0]['Organization_Phone']; ?></span>
						<span class="m-l-40 text-black sm-pull-right"><?php print CommonLanguage::getMessage('Email');?>: <?php echo $org_details[0]['Organization_Email']; ?></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
<script>
    var DriverLang = <?php echo json_encode(CommonLanguage::getMessage('driver')); ?>,
        SalesManLang = <?php echo json_encode(CommonLanguage::getMessage('salesman')); ?>,
        TruckNbLang = <?php echo json_encode(CommonLanguage::getMessage('truck_number')); ?>,
        TypeNameLang =<?php echo json_encode(CommonLanguage::getMessage('type_name')); ?>,
        ModelLang = <?php echo json_encode(CommonLanguage::getMessage('model')); ?>,
        ZoneLang = <?php echo json_encode(CommonLanguage::getMessage('zone')); ?>,
            Required_Truck = <?php echo json_encode(CommonLanguage::getMessage('Required_Truck')); ?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit'));?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully'));?>;
	var ZoneID,CurOrderID, UpdateTableTimeout,LoadingOrderTableBody = $("#LoadingOrderTable tbody");

	$(function(){
		//
		//		$('#LoadingOrderTable').dataTable({
		//
		//			"sPaginationType": "bootstrap",
		//			"destroy": true,
		//			"scrollCollapse": true,
		//			"oLanguage": {
		//				sLengthMenu: menu,
		//
		//			},
		//			"iDisplayLength": 10
		//		});
		$("body").addClass("NoSearch")
		$("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
		var table = $('#LoadingOrderTable');
		//        var settings = {
		//            "sDom": "<'table-responsive't><'row'<p i>>",
		//            "sPaginationType": "bootstrap",
		//            "destroy": true,
		//            "scrollCollapse": true,
		//            "oLanguage": {
		//                "sLengthMenu": "_MENU_ ",
		//                "sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
		//            },
		//            "iDisplayLength": 10
		//        };
		//        table.dataTable(settings);
		//
		//		$('#search-table').on("keyup",function() {
		//			table.fnFilter($(this).val());
		//		});
		var StatementTableTemplate = '<table class="table table-hover StatementTable" id="StatementTable">'+
			'<tbody>'+
			'</tbody>'+
			'</table>';
		var LoadingTableTemplate = '<div class="TableLoader"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress"/></div>';
		$('tbody',table).on('click', '>tr', function() {
			if ($(this).hasClass('shown') && $(this).next().hasClass('row-details')) {
				$(this).removeClass('shown');
				$(this).next().remove();
				return;
			}
			var tr = $(this).closest('tr');
			var row = table.DataTable().row(tr);
			$(this).parents('tbody').find('.shown').removeClass('shown');
			$(this).parents('tbody').find('.row-details').remove();
			row.child(LoadingTableTemplate).show();
			tr.addClass('shown');
			tr.next().addClass('row-details');
			var code = {
				code_id : $('td>div:first-of-type',tr).html()
			}
			console.log(code);
			$.ajax({
				url: 'InventoryAjax/addLoadingOrderAjax',
				data:code,
				dataType: 'json',
				complete: function(data,vv){
					if(vv == "success"){
						var TheTable = $(StatementTableTemplate),results = (data.responseJSON);
						for (var i = 0; i < (results.length); i++) {
							console.log(results);
							var locations =  "<tr>" +
								"<td class='text-center'>" + results[i]["Product_Code"] + "</td>" +
								"<td>" + results[i]["Product_Name"] + "</td>" +
								"<td class='text-center'>" + results[i]['Quantity']+"</td>";
							$("tbody",TheTable).append($(locations));
						}
						$(".TableLoader",tr.next()).replaceWith(TheTable);
						//row.child(TheTable);
						//console.log(data.responseJSON);
					}
				}
			})
		});
		$("#LoadOrderSubmitButton").addClass("disabled")
		$("#Truck_ID").on("change",function(e){
			// $("#LoadOrderSubmitButton").addClass("disabled")
			clearTimeout(UpdateTableTimeout);
			if(e.which == 13){
				ChangeOrder();
				return;
			}
			UpdateTableTimeout = setTimeout(function(){
				ChangeOrder();
			},1000)
		});
		$("#LoadOrderSubmitButton").on("click",function(){
			var Truck_ID = $("#Truck_ID").val(),
				Class_ID = $('#Class_ID').val();
			if(Truck_ID != 0 && Class_ID !=0){
				var Data = {
					Vehicle_ID :  Truck_ID,
					Driver_ID: $("#DriverID").val(),
					Load_Order_ID: $("#Load_Order_ID").text(),
					Sales_Man_ID:$("#SalesManID").val(),
					Loading_Order_Date: $("#LoadingInvoiceDate").val(),
					Class_ID:Class_ID,
					orders:[]
				};
				var row = $("#LoadingOrderTable").dataTable().fnGetNodes();
				for(var i=0; i<row.length;i++){
					if($(row[i]).find(".IsLoad").is(":checked")){
						Data.orders.push({
							Sales_Order_ID      : $(row[i]).attr("data-id"),
							Assign_To 			: $(row[i]).find(".IsLoad").is(":checked") ? $("#Truck_ID").val() : 0
						})
					}
				}
				$("#LoadingOrderSuccess").addClass("hidden")
				$.ajax({
					url:"InventoryAjax/addLoadingOrderAjax",
					method:"post",
					data:Data,
					complete:function(v,vv){
						if(vv == "success"){
							$(document.body).animate({scrollTop:0})
							$("#LoadingOrderSuccess").removeClass("hidden")
							$("#LoadingOrderSuccess").attr("class","alert alert-success").html(Submitted_Successfully)
						}else{
							$("#LoadingOrderSuccess").attr("class","alert alert-danger").html(Failed_Submit)
						}
						$("#LoadingItemTableLoader").hide().insertBefore("#LoadingOrderTable")
					}
				})
			}else{
				$("#LoadingItemTableLoader").attr("class","alert alert-warning").html(Required_Truck)
                $(document.body).animate({scrollTop:0},800)
			}
		})
		$("#Truck_ID").on("change",function(){
			var ID ={
				Truck_ID : $('#Truck_ID').val()
			}
			$.ajax({
				url:"InventoryAjax/addLoadingOrderAjax",
				data:ID,
				dataType:"json",
				complete:function(v,vv){
					if(vv="success"){
						result=(v.responseJSON);
					
						var Content = "";
						Content += "<div><strong>"+DriverLang+" : </strong>"+result[0]['Driver_Name']+"<br/></div>";
						Content += "<div><strong>"+SalesManLang+": </strong>"+ [!result[0]['Sales_Man_Name']?'-- --':result[0]['Sales_Man_Name']]  +"<br/></div>";
						Content += "<div><strong>"+TruckNbLang+": </strong>"+result[0]['Vehicle_Registration_Number']+"<br/></div>";
						Content += "<div><strong>"+TypeNameLang+":</strong>"+result[0]['Vehicle_Type_Name']+"<br/></div>";
						Content += "<div><strong>"+ModelLang+": </strong>"+result[0]['Model_Name']+"<br/></div>";
						Content += "<div><strong>"+ZoneLang+": </strong>"+result[0]['Zone_Name']+"<br/></div>";
						$("#TruckInfoContent").html(Content);
						var ZoneID = result[0]['Zone_ID']
						var DriverID = result[0]['Driver_ID']
						var SalesManID = result[0]['Sales_Man_ID']
						$("#Zone_ID").val(ZoneID);
						$("#DriverID").val(DriverID);
						$("#SalesManID").val(SalesManID);
					}
				}
			})
		})
	})
	function ChangeOrder(){
		var Data = {
			GetZone:  $("#Zone_ID").val()
		};
		LoadingOrderTableBody.empty();
		$("#ReturnItemSuccess").addClass("hidden")
		$("#ReturnItemTableLoader").css({display:"block",opacity:0}).animate({opacity:1});
		$("#LoadOrderSubmitButton").addClass("disabled")
		$.ajax({
			url:"InventoryAjax/addLoadingOrderAjax",
			data:Data,
			dataType:"json",
			complete:function(v,vv){
				if(vv="success"){
					result=(v.responseJSON);
					console.log(result);
					$("#ReturnItemTableLoader").hide()
					for(var i=0;i<result.length;i++){
						var TR="<tr data-id="+result[i]['Sales_Order_ID']+">"
						TR+="<td class='text-center Order'><div class='NameCenter Arrow'>"+result[i]['Sales_Order_ID']+"</div></td>"
						TR+="<td class='text-center'>"+result[i]['Customer_Name']+"</td>"
						TR+="<td class='text-center'>"+result[i]['Sales_Order_Date']+"</td>"
						TR+="<td class='text-center '><input type='checkbox' class='IsLoad' ></td>"
						TR+="</tr>"
						TR = $(TR);
						LoadingOrderTableBody.append(TR);
						UpdateSubmitButton()
					}
				}
			}
		})
	}
	function UpdateSubmitButton(){
		$("#LoadingOrderTable tbody td").on("click",">.IsLoad",function(){
			var Check = $(this).is(":checked");
			if(!Check){
				$("#LoadOrderSubmitButton").addClass("disabled")
			}else{
				$("#LoadOrderSubmitButton").removeClass("disabled")
			}
		})
	}
</script>
