<style type="text/css">
	#OverTimeTable thead tr th {
		color:#555;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	#OverTimeTable tbody tr td input{
		width:100%;
		margin:0;
		border: 1px solid rgba(0,0,0,0.02);
		background-color:#e5e5e5;
	}
	#OverTimeTable tbody tr td {
		border:0;
		padding:3px 1px;
		position:relative;
	}
	#OverTimeTable 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;
	}
	#OverTimeTable .Hint{
		position: absolute;
		font-size: 10px;
		font-weight: bold;
		height: 20px;
		line-height: 20px;
		bottom: 2px;
		right: 4px;
		color: rgb(153, 153, 153);   
	}
	#OverTimeTable .TotalTD{
		width: auto;
		display: inline-block;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
	}
	#OverTimeTable .Disc{
		width:50px;
	}
	#OverTimeTable input.wrong{
		border: 1px solid rgba(255, 0, 0, 0.2);
		background: rgba(255, 0, 0, 0.05);
	}
	.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;
	}
	.input-group-addon 
	{
		background-color:#4c0870 !important;
		color:#fff;
	}
</style>
<script src="<?php echo THEME_PATH; ?>plugins/jquery-validation/js/jquery.validate.min.js"></script>
<link href="<?php echo THEME_PATH; ?>plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css"/>
<script src="<?php echo THEME_PATH; ?>plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<script src="<?php echo THEME_PATH; ?>plugins/moment/moment.min.js"></script>
<div id="LoanDisabler" 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="OverTimeForm">
	<div class="container-fluid container-fixed-lg">
		<div class="panel panel-default">
			<div class="panel-body">
				<div id="OverTimeSuccess" 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('add_overtime_act');?></h2>
								<br>
							</div>
							<div class="col-md-4 col-sm-height col-bottom sm-no-padding sm-p-b-20" style="vertical-align: top;">
								<div  class="form-group form-group-default input-group">
									<label><?php print CommonLanguage::getMessage('Date');?></label>
									<input id="OverTime_Date" name="OverTime_Date" class="form-control" value="<?php echo ($today); ?>" />
									<span class="input-group-addon "><i class="fa fa-calendar"></i></span>
								</div>
								<div class="row" style="padding:0 5px;margin-bottom: 10px;">
									<div class="col-md-6">
										<?php print CommonLanguage::getMessage('from_time');?>:
										<input type="text" value="12:00 AM" id="Overtime_Start_Time" data-format="hh:mm:ss" name="Overtime_Start_Time" placeholder="From Time" class="form-control">
									</div>
									<div class="col-md-6">
										<?php print CommonLanguage::getMessage('to_time');?>:
										<input type="text" value="12:00 AM" id="Overtime_End_Time" data-format="hh:mm:ss" name="Overtime_End_Time" placeholder="From Time" class="form-control">
									</div>
								</div>
								<div class="row" style="padding:0 5px;margin-bottom: 15px;">
									<?php print CommonLanguage::getMessage('duration');?>:
									<input style="color:#000" type="text" value="00:00" disabled id="Overtime_Duration" data-format="hh:mm:ss" name="Overtime_Duration" placeholder="From Time" class="form-control">
								</div>
							</div>
						</div>
					</div>
					<div>
						<div class="clearfix"></div>
					</div>
					<div class="table-responsive">
						<table class="table m-t-50" id='OverTimeTable'>
							<thead>
								<tr>
									<th class="text-center"><?php print CommonLanguage::getMessage('employee_name');?></th>
									<th class="text-center"><?php print CommonLanguage::getMessage('basic_salary');?></th>
									<th class="text-center"><?php print CommonLanguage::getMessage('shift_duration');?></th>
									<th style="width:10%" class="text-center"><?php print CommonLanguage::getMessage('is_holiday');?></th>
									<th style="width:10%" class="text-center"><?php print CommonLanguage::getMessage('is_paid');?></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><input type="text" style="text-align:center" class="form-control AutoComplete Employee_Name" id="Employee_ID"></td>
									<td><input type="text"style="text-align:center;color: #000;" disabled class="form-control   Basic_Salary" id="Basic_Salary"></td>
									<td><input type="text" style="text-align:center;color: #000;" disabled class="form-control Shift_Duration isnumber" id="Shift_Duration"></td>
									<td class="text-center"><input type="checkbox" data-init-plugin="switchery" id="Is_Holiday"/></td>
									<td class="text-center"><input type="checkbox" data-init-plugin="switchery" id="Is_Paid"/></td>
								</tr>
							</tbody>
						</table>
					</div>
					<br>
					<div class="container-sm-height" >
						<div class="row row-sm-height b-a b-grey">
							<div class="col-sm-8 col-sm-height col-middle clearfix sm-p-b-15">
							</div>
							<div class="col-sm-4 text-right bg-menu col-sm-height padding-15">
								<!--                                                <h5 class="font-montserrat all-caps small no-margin hint-text text-white bold">Total</h5>-->
								<h1 class="no-margin text-white Quantity isnumber"><span class="CurrencyIndicator"></span>&nbsp;<span id="Overtime_Amount">0</span></h1>
							</div>
						</div>
					</div>
					<div class="container-sm-height" >
						<button class=" btn btn-success btn-cons m-b-10 pull-right" id="OverTimeButton" 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>
			</div>
		</div>
	</div>
</form>
<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully'));?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit'));?>;
	var current_Employee ;
	$(function(){
		$('#Overtime_Start_Time,#Overtime_End_Time').timepicker()
		$('#Overtime_Duration').timepicker({
			showMeridian:false,
			maxHours:60
		})
		$('#Overtime_Start_Time,#Overtime_End_Time').on("change",function(){
			CalculateTimeFromTo()
			CalculateAmount()
		})
		$('#Is_Holiday').on("change",function(){
			CalculateAmount();
		})
		$("body").addClass("NoSearch")
		$("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
		EnableAutoComplete($("#OverTimeTable .AutoComplete.Employee_Name"));
		$("#OverTime_Date").datepicker({autoclose:true}).on("changeDate",function(e){
			$(this).keyup();
		})
		$("#OverTimeTable").delegate(".Quantity,.UnitPrice,.Disc","blur keyup",function(e){
			var me = $(this),TR = me.parents("tr");
			//            setTimeout("UpdateTable()",100);
			if(e.which == 13){
				if(me.hasClass("Quantity")){
					TR.find(".UnitPrice").focus()
				}else if(me.hasClass("UnitPrice")){
					TR.find(".Disc").focus()
				}
			}
			if(TR.index() < $("#OverTimeTable tbody").children().length-1){
				if($.trim(me.val()).match(/^\s*?([\d]+(\.\d+)?|\.\d{1,2})\s*$/) == null){
					me.addClass("wrong")
				}else{
					me.removeClass("wrong")
				}
			}
		});
		$("#OverTimeTable tbody").delegate("> tr input","keydown",function(e){
			var me = $(this)
			if(e.which == 8){
				if(me.val() == "" && !me.hasClass("CODE")){
					me.parents("td").prev().find("input").focus()
				}else if(me.val() == "" && me.hasClass("CODE")){
					if(me.parents("tr").prev()){
						me.parents("tr").prev().find(".Disc").focus()
					}
				}
			}
		})
		$("#OverTimeForm").validate({
			ignore: ".ignore",
		})
		$("#OverTimeButton").on("click",ApplyPostMethod);
		// UpdateSubmitButtonStatus()
	})
	//    function UpdateTable(){
	//        $("#OverTimeTable tr").each(function(){
	//            UpdateTotalForRow($(this))
	//        })
	//        setTimeout("UpdateSubmitButtonStatus()",100)
	//    }
	function EnableAutoComplete(who){
		if(!who.hasClass("AutoAdded")){
			who.autocomplete({
				source: 'xhr/ajaxAddEmployeeOverTime?hidden=true' ,
				minLength: 2,
				select: function(event, ui){
					var TR = $(this).parents("tr");
					TR.find("input.Employee_Name").val(ui.item.Employee_Name),
						TR.find("input.Basic_Salary").val(ui.item.Currency_Symbol +' ' +  ui.item.Basic_Salary ),
						TR.find("input.Shift_Duration").val(ui.item.Shift_Duration),
						current_Employee = ui.item.Employee_ID;
					current_Name = ui.item.Employee_Name;
					current_currency = ui.item.Currency_ID;
					return false;
				}
			}).autocomplete("instance")._resizeMenu = function( ul, items ) {
				this.menu.element.outerWidth((who.width()) + parseFloat(who.css("padding-left")) + parseFloat(who.css("padding-right")) + 2);
			}
			who.autocomplete("instance")._renderItem = function(ul,item){
				var MyType =  item.Employee_Name;
				return $("<li>").html("<table cellspacing='0' cellpadding='0'><tr><td class='OnlyText'>"+MyType+"</td></tr></table>").appendTo(ul)
			}
			who.addClass("AutoAdded")
		}
		$(document).keydown(function(e){
			if(e.which == 8 && e.target.tagName.toLowerCase() != "input"){
				e.preventDefault()
			}
		})
	}
	function ApplyPostMethod(){
		$("#OverTimeSuccess").attr("class","hidden");
		var Amount = $("#Overtime_Amount").text().split(" ");
		var Overtime_Amount = Amount[1];
		if($("#OverTimeForm").valid()){
			var IsValidated=true,
				Data = {
					Employee_ID: current_Employee,
					Employee_Name: current_Name,
					Overtime_Amount:Overtime_Amount,
					Overtime_Currency:current_currency,
					Overtime_Start_Time:$("#Overtime_Start_Time").val(),
					Overtime_End_Time:$("#Overtime_End_Time").val(),
					Overtime_Duration:$("#Overtime_Duration").val(),
					OverTime_Date:$("#OverTime_Date").val(),
					Is_Holiday : $("#Is_Holiday").is(":checked") ? 1 : 0,
					Is_Paid : $("#Is_Paid").is(":checked") ? 1 : 0
				};
			if(!IsValidated)return;
			$("#OverTimeDisabler").show();
			$.ajax({
				url:"HRMAjax/addOverTimeActualRequest",
				method:"POST",
				data:Data,
				complete:function(v1,v2){
					if(v2 == "success"){
						$("#OverTimeSuccess").attr("class","alert alert-success").html(Submitted_Successfully)
					}else{
						$("#OverTimeSuccess").attr("class","alert alert-danger").html(Failed_Submit)
					}
					$(document.body).animate({scrollTop:0},800)
					$("#OverTimeDisabler").hide();
				}
			})
		}else{
			$(document.body).animate({scrollTop:0},800)
		}
	}
	function CalculateTimeFromTo(){
		var X = new Date(Date.parse("1/1/2010 "+$("#Overtime_End_Time").val()) - Date.parse("1/1/2010 "+$("#Overtime_Start_Time").val()))
		$("#Overtime_Duration").val(X.getUTCHours() + ":" + X.getUTCMinutes())
	}
	function CalculateAmount(){
		var data     = $('#Overtime_Duration').val().split(':');
		var Hours   = data[0];
		var Minutes = data[1];
		var OverTime = parseInt(Hours) + parseFloat(Minutes/60)  ;
		var Shift        = $('#Shift_Duration').val().split(':');
		var ShiftHours   = Shift[0];
		var ShiftMinutes = Shift[1];
		var ShiftDuration = parseInt(ShiftHours) + parseFloat(ShiftMinutes/60) ;
		var Salary = $("#Basic_Salary").val().split(" ");
		var Currency    = Salary[0];
		var BasicSalary = Salary[1];
		if ($("#Is_Holiday").is(":checked")){
			//overtime With Holiday        
			//(((basic salary/30 )/shifthrs)*2)*overtime
			var AmountWithHoliday = (((BasicSalary/26)/ShiftDuration)*2)*OverTime;
			var TotalAmountWithHoliday =  AddCommas(parseFloat(AmountWithHoliday+"").toFixed(2))
			$("#Overtime_Amount").empty().html(Currency +' '+ TotalAmountWithHoliday);
		}else{
			//overtime Without Holiday
			//(((basic salary/30 )/shifthrs)*1.5)*overtime
			var AmountWithoutHoliday = (((BasicSalary/26)/ShiftDuration)*1.5)*OverTime;
			var TotalAmountWithoutHoliday =  AddCommas(parseFloat(AmountWithoutHoliday+"").toFixed(2))
			$("#Overtime_Amount").empty().html(Currency +' '+ TotalAmountWithoutHoliday);
		}
	}
</script>
