<section class="container" style="padding-bottom: 2rem;">
	<div class="row">
		<div class="col-12 col-md-3">
			<div id="navCard" class="card bg-light-transparent">
				<div class="card-header bg-light">
					<h5 class="card-title float-left">Leave Type</h5>
				</div>
				<div class="card-body">
					<div class="card no-shadow">
						<div class="card-body">
							<div class="nav flex-column nav-pills" id="tab" role="tablist" aria-orientation="vertical">
								<a class="nav-link active" id="type-tab" data-toggle="pill" href="#type" role="tab" aria-controls="type" aria-selected="false">All</a>
								<hr>
								<?php foreach($leave_types as $type): ?>
									<a class="nav-link" id="<?php echo $type['code']; ?>-tab" data-toggle="pill" href="#<?php echo $type['code']; ?>" role="tab" aria-controls="<?php echo $type['code']; ?>" aria-selected="false"><?php echo $type['name']; ?></a>
								<?php endforeach; ?>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-9">
			<div class="tab-content" id="tabContent">
				<div class="tab-pane fade show active" id="type" role="tabpanel" aria-labelledby="type-tab">
					<div class="card bg-light-transparent">
						<div class="card-header bg-light">
							<h5 class="card-title float-left">Leave Type</h5>
							<div class="btn-group float-right">
								<button type="button" class="btn btn-primary btn-sm" onclick="openTypeModal();" data-trigger="hover" data-tooltip="tooltip" title="Add New Leave Type"><i class="fas fa-plus"></i> Add New</button>
							</div>
						</div>
						<div class="card-body">
							<div class="card no-shadow">
								<div class="card-body">
									<div class="table-responsive">
										<table id="table_types" class="table nowrap table-hover">
											<thead>
												<tr>
													<th class="text-center">#</th>
													<th>Type</th>
													<th>Code</th>
													<!-- <th>Description</th> -->
													<th>Colour</th>
													<th></th>
												</tr>
											</thead>
											<tbody>
												<?php if($leave_types): ?>
													<?php $i = 1; ?>
													<?php foreach($leave_types as $type): ?>
														<tr>
															<td><?php echo $i++; ?></td>
															<td><?php echo $type['name']; ?></td>
															<td><?php echo $type['code']; ?></td>
															<!-- <td><?php echo $type['description']; ?></td> -->
															<td style="border: 1px #aaa solid; background: <?php echo $type['colour']; ?>"></td>
															<td>
																<?php if($type['is_fixed'] != 1): ?>
																	<button type="button" class="btn btn-sm btn-danger" onclick="deleteType(<?php echo $type['id']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete Type"><i class="fas fa-trash"></i></button>
																<?php endif; ?>
															</td>
														</tr>
													<?php endforeach; ?>
												<?php endif; ?>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<?php foreach($leave_types as $type): ?>
					<div class="tab-pane fade" id="<?php echo $type['code']; ?>" role="tabpanel" aria-labelledby="<?php echo $type['code']; ?>-tab">
						<div class="card bg-light-transparent" style="margin-bottom: 2rem;">
							<div class="card-header bg-light">
								<h5 class="card-title float-left"><?php echo $type['name']; ?> Setting</h5>
								<?php if($type['is_fixed'] != 1): ?>
									<button class="btn btn-sm btn-danger float-right" onclick="deleteType(<?php echo $type['id']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete <?php echo $type['name']; ?>">Delete</button>
								<?php endif; ?>
							</div>
							<div class="card-body">
								<div class="card no-shadow">
									<form  class="form" id="typeForm-<?php echo $type['id']; ?>">
										<div class="card-body">
											<div class="form-row">
												<div class="col">
													<div class="form-group">
														<label for="typeName-<?php echo $type['id']; ?>">Name</label>
														<input type="text" required data-parsley-error-message="Name is required." class="form-control" name="typeName-<?php echo $type['id']; ?>" id="typeName-<?php echo $type['id']; ?>" placeholder="" value="<?php echo $type["name"]; ?>">
													</div>
												</div>
												<div class="col-1">
													<div class="form-group">
														<label for="typeCode-<?php echo $type['id']; ?>">Code</label>
														<input type="text" required data-parsley-error-message="Code is required." class="form-control" name="typeCode-<?php echo $type['id']; ?>" id="typeCode-<?php echo $type['id']; ?>" placeholder="" value="<?php echo $type["code"]; ?>">
													</div>
												</div>
												<div class="col-4">
													<div class="form-group">
														<label for="typeColour-<?php echo $type['id']; ?>">Colour</label>
														<div class="input-group cp">
															<input type="text" required data-parsley-error-message="Colour is required." class="form-control" name="typeColour-<?php echo $type['id']; ?>" id="typeColour-<?php echo $type['id']; ?>" aria-describedby="colourHelp" placeholder="" value="<?php echo $type["colour"]; ?>">
															<div class="input-group-append">
																<span class="input-group-text"><span class="input-group-addon"><i></i></span></span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="form-row">
												<div class="col">
													<div class="form-group">
														<label for="typeDesc-<?php echo $type['id']; ?>">Description</label>
														<input type="text" class="form-control" name="typeDesc-<?php echo $type['id']; ?>" id="typeDesc-<?php echo $type['id']; ?>" placeholder="" value="<?php echo $type["description"]; ?>">
													</div>
												</div>
												<div class="col-5">
													<div class="form-group">
														<label for="typeCoolingPeriod-<?php echo $type['id']; ?>">Kene mohon sebelum berapa hari </label>&nbsp
														<button onclick="openInfoModal('prior');" type="button" class="btn btn-outline-dark btn-sm" data-tooltip="tooltip"  data-trigger="hover" title="Cooling Period Prior Leave Date"><i class="fa fa-info"></i></button> 
														<input type="text" required data-parsley-error-message="Cooling Period is required." class="form-control" name="typeCoolingPeriod-<?php echo $type['id']; ?>" id="typeCoolingPeriod-<?php echo $type['id']; ?>" placeholder="3" value="<?php echo $type["cooling_period"]; ?>">
													</div>
												</div>
											</div>	
											<div class="form-row">
												<div class="col">
													<div class="form-group">
														<label for="typeName-<?php echo $type['id']; ?>">Annual Increament (days)</label>
														<input type="text" required data-parsley-error-message="Name is required." class="form-control" name="typeName-<?php echo $type['id']; ?>" id="typeName-<?php echo $type['id']; ?>" placeholder="0" value="<?php echo $type["name"]; ?>">
													</div>
												</div>
												<div class="col-5">
													<div class="form-group">
														<label for="typeCode-<?php echo $type['id']; ?>">Frequency <small><i>(eg. Every 12 months)</i></small></label>&nbsp
														<button onclick="openInfoModal('frequency');" type="button" class="btn btn-outline-dark btn-sm" data-tooltip="tooltip"  data-trigger="hover" title="Frequency"><i class="fa fa-info"></i></button> 
														<input type="text" required data-parsley-error-message="Code is required." class="form-control" name="typeCode-<?php echo $type['id']; ?>" id="typeCode-<?php echo $type['id']; ?>" placeholder="12" value="<?php echo $type["code"]; ?>">
													</div>
												</div>	
											</div>
											<div class="form-row">
												<div class="col">
													<div class="form-group form-check">
														<input type="checkbox" class="form-check-input" <?php if($type['include_holiday'] == 1) echo 'checked'; ?> id="typeIncHoliday-<?php echo $type['id']; ?>">
														<label class="form-check-label <?php if ($type['include_holiday'] == 1) echo 'active'; ?>" for="typeIncHoliday-<?php echo $type['id']; ?>">Brought Forward</label>
													</div>
												</div>
												<div class="col-4">
													<div class="form-group">
														<label for="typeCode-<?php echo $type['id']; ?>">Brought Forward Ratio</label>&nbsp
														<button onclick="openInfoModal('bfratio');" type="button" class="btn btn-outline-dark btn-sm" data-tooltip="tooltip"  data-trigger="hover" title="BF Ratio"><i class="fa fa-info"></i></button> 
														<input type="text" required data-parsley-error-message="Code is required." class="form-control" name="typeCode-<?php echo $type['id']; ?>" id="typeCode-<?php echo $type['id']; ?>" placeholder="12" value="<?php echo $type["code"]; ?>">
													</div>
												</div>
												<div class="col-4">
													<div class="form-group">
														<label for="typeCode-<?php echo $type['id']; ?>">Brought Forward Expiry</label>&nbsp
														<button onclick="openInfoModal('bfexpiry');" type="button" class="btn btn-outline-dark btn-sm" data-tooltip="tooltip"  data-trigger="hover" title="BF Expiry in month"><i class="fa fa-info"></i></button> 
														<input type="text" required data-parsley-error-message="Code is required." class="form-control" name="typeCode-<?php echo $type['id']; ?>" id="typeCode-<?php echo $type['id']; ?>" placeholder="12" value="<?php echo $type["code"]; ?>">
													</div>
												</div>
											</div>
											<div class="form-group form-check">
												<input type="checkbox" class="form-check-input" <?php if($type['include_holiday'] == 1) echo 'checked'; ?> id="typeIncHoliday-<?php echo $type['id']; ?>">
												<label class="form-check-label <?php if ($type['include_holiday'] == 1) echo 'active'; ?>" for="typeIncHoliday-<?php echo $type['id']; ?>">Include Holidays and Restday</label>&nbsp
														<button onclick="openInfoModal('includeholiday');" type="button" class="btn btn-outline-dark btn-sm" data-tooltip="tooltip"  data-trigger="hover" title="Include Holiday"><i class="fa fa-info"></i></button>
											</div>
											<div class="form-group form-check">
												<input type="checkbox" class="form-check-input" <?php if($type['include_holiday'] == 1) echo 'checked'; ?> id="typeIncHoliday-<?php echo $type['id']; ?>">
												<label class="form-check-label <?php if ($type['include_holiday'] == 1) echo 'active'; ?>" for="typeIncHoliday-<?php echo $type['id']; ?>">Prorate Monthly</label>
											</div>
											<div class="form-group form-check">
												<input type="checkbox" class="form-check-input" <?php if($type['include_holiday'] == 1) echo 'checked'; ?> id="typeIncHoliday-<?php echo $type['id']; ?>">
												<label class="form-check-label <?php if ($type['include_holiday'] == 1) echo 'active'; ?>" for="typeIncHoliday-<?php echo $type['id']; ?>">Allow to apply without allocation</label>&nbsp
														<button onclick="openInfoModal('applywithnoalloacation');" type="button" class="btn btn-outline-dark btn-sm" data-tooltip="tooltip"  data-trigger="hover" title="Application with no allocation"><i class="fa fa-info"></i></button>
											</div>
										</div>
									</form>
									<div class="card-footer">
										<button class="btn btn-primary float-right" onclick="updateType(<?php echo $type['id']; ?>)" style="margin-bottom: 1rem;">Update</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
	</div>
</section>
<div class="modal fade" id="typeModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Leave Type</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
			<form class="form" id="typeForm">
				<div class="modal-body">
					<div class="form-group">
						<label for="typeName">Name</label>
						<input type="text" required data-parsley-error-message="Name is required." class="form-control" name="typeName" id="typeName" placeholder="Insert type name">
					</div>
					<div class="form-group">
						<label for="typeCode">Code</label>
						<input type="text" required data-parsley-error-message="Code is required." class="form-control" name="typeCode" id="typeCode" placeholder="Insert type code">
					</div>
					<div class="form-group">
						<label for="typeDesc">Description</label>
						<input type="text" class="form-control" name="typeDesc" id="typeDesc" placeholder="Insert type description">
					</div>
					<div class="form-group">
						<label for="typeColour">Colour</label>
						<div class="input-group colorpicker-component cp">
							<input type="text" required data-parsley-error-message="Colour is required." class="form-control" name="typeColour" id="typeColour" aria-describedby="colourHelp" placeholder="Insert type colour">
							<div class="input-group-append">
								<span class="input-group-text"><span class="input-group-addon"><i></i></span></span>
							</div>
						</div>
					</div>
					<div class="form-group form-check">
						<input type="checkbox" class="form-check-input" id="typeIncHoliday">
						<label class="form-check-label" for="typeIncHoliday">Include Holidays and Restday</label>
					</div>
				</div>
				<div class="modal-footer">
					<div class="btn-group float-right">
						<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-light">Save</button>
					</div>
				</div>
			</form>
        </div>
    </div>
</div>
<div class="modal fade" id="infoModal">
    <div class="modal-dialog"  style="max-width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="info-modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
           <div class="modal-body" >
		   <p id="info-modal-content"></p>
		   </div>
		</div>
	</div>
</div>		
<script>
	$('#tab a').click(function(e) {
		e.preventDefault();
		$(this).tab('show');
	});

	var hash = window.location.hash;
	
	$(function() {
		$('#tab a[href="' + hash + '"]').tab('show');
	});
	
	$(".nav-pills > a").on("shown.bs.tab", function(e) {
		var id = $(e.target).attr("href").substr(1);
		window.location.hash = id;
	});

	$("#typeForm").on("submit", function(e){
		e.preventDefault();
		createType();
	});

	function openTypeModal()
	{
		clearForm("#typeForm");

		$("#typeModal").modal('show');
	}

	function createType()	{
		validateForm("#typeForm", "Are you sure you want to create this leave type?", function(){
			$.ajax({
				type: "POST",
				url: "<?php echo base_url('hr/leave/createType'); ?>",
				data: {
					name: $("#typeName").val(),
					code: $("#typeCode").val(),
					description: $("#typeDesc").val(),
					colour: $("#typeColour").val(),
					include_holiday: $("#typeIncHoliday").val()
				},
				dataType: "JSON",
				success: function(data){
					if(data.status == "Success")
                    {
                        $('#typeModal').modal('hide');
							
                        localStorage.setItem("status",data.status);
                        localStorage.setItem("msg",data.msg);

                        location.reload();
                    }
				}
			});
		});
	}

	function updateType(id)	{
		if (id) {
			validateForm("#typeForm-" + id, "Are you sure you want to update this leave type?", () => {
				$.ajax({
					type: "POST",
					url: "<?php echo base_url('hr/leave/updateType'); ?>",
					data: { 
						id: id,
						code: $('#typeCode-' + id).val(),
						name: $('#typeName-' + id).val(),
						description: $('#typeDesc-' + id).val(),
						colour: $('#typeColour-' + id).val(),
						include_holiday: ($("#typeIncHoliday-" + id).is(':checked')) ? 1 : 0
					},
					dataType:  "JSON",
					success: function(data){
						if(data.status == "Success")
						{
							localStorage.setItem("status",data.status);
							localStorage.setItem("msg",data.msg);

							location.reload();
						}
					}
				})
			})
		}
	}

	function deleteType(id)	{
		toastConfirm("Are you sure you want to delete this leave type?", function(){
			$.ajax({
				type: "POST",
				url: "<?php echo base_url('hr/leave/deleteType'); ?>",
				data: { id: id },
				dataType:  "JSON",
				success: function(data){
					if(data.status == "Success")
                    {
                        localStorage.setItem("status",data.status);
                        localStorage.setItem("msg",data.msg);

                        location.reload();
                    }
				}
			})
		});
	}


	function clearForm(e)	{
		$(e).parsley().reset();

		$(e).find("input, textarea").val("");
	}
	function openInfoModal(item) {
		var title = '';
        var content  = '';
        switch(item) {
		  case "frequency":
			title = "Leave Increament Frequency";
			content = "Months of service to qualify Leave Increament from the date of join or date of previous increament entitlement.";
			break;
		  case "includeholiday":
			title = "Include Public Holidays and Restday";
			content = "No of days applied will include Public Holidays and Resday";
			break;
		case "prior":
			title = "No of days ";
			content = "No of days applied will include Public Holidays and Resday";
			break;
		case "bfratio":
			title = "Brought Forward Ratio";
			content = "Brought Forward Ratio in percent. Eg. 100% from leave balance. or 50% from leave balance.";
			break;
		case "bfexpiry":
			title = "Brought Forward Expiry";
			content = "No of months before the brought forward leave expired.";
			break;
		case "applywithnoalloacation":
			title = "Application With No Allocation";
			content = "Yes = Staff can apply leave without allocation. HR will allocate once receive application before approval by HOD.</p><p>No = HR must allocate leave before staff key in application.";
			break;
		  default:
			title = item;
			content = "Kindly please refer to firm policy or contact HR for further detail.";
		}
        $("#info-modal-title").text(title);
		$("#info-modal-content").text(content);

        $('#infoModal').modal('show');
                
        
    }
</script>