<style>
	.accordion {
		background-color: #eee;
		color: #444;
		cursor: pointer;
		/*padding: 18px;*/
		width: 100%;
		border: none;
		/*text-align: left;*/
		outline: none;
		/*font-size: 15px;*/
		transition: 0.4s;
	}

	.active1, .accordion:hover {
		background-color: #ccc;
	}

	.accordion:after {
		content: '\002B';
		color: #007bff;
		font-weight: bold;
		float: right;
		font-size: 150%;
		margin-left: 5px;
	}

	.active1:after {
		content: "\2212";
	}

	.panel {
		padding: 0px 0.1px;
		background-color: transparent;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}
</style>

<section class="container" style="padding-bottom: 2rem;">
	<div class="row">
		<div class="col-sm-12">
			<div class="card bg-light-transparent">
				<div class="card-header bg-light">
					<h4 class="card-title float-left">List of Stationery Item</h4>
					<?php if(($this->session->userdata('all_modules_access')[0]['access_lvl'] == 'admin') || $_SESSION['user']['division_id'] == 4){ ?>
						<div class="float-right">
							<button type="button" class="btn btn-primary" onclick="open_modal('new category')">Add New Category</button>
						</div>
					<?php } ?>
				</div>
				<div class="card-body">
					<div class="card no-shadow">
						<div class="card-body">
							<div class="form-row">
								<div class="col-12">
									<label for="stationery"><h5><strong>Stationery Lists</strong></h5></label>
									<br>
									<?php if(!empty($stationery_category)) foreach($stationery_category as $package_key => $package_row){ ?>
										<a class="accordion p-2 bg-light float-right">
											<?php echo $package_row['category_name']; ?>
											<?php if(sizeof($package_row['total_item']) >=  1) {?>
												<span class="badge badge-pill badge-danger"><?php echo $package_row['total_item']; ?></span>
											<?php } ?>
										</a>

										<div class="panel">
											<br>
											<div class="col-12">
												<button type="button" class="btn btn-primary btn-sm float-right" title="Add New Item <?php echo $package_row['category_name']; ?>" onclick="open_modal('new item <?php echo $package_row['category_name']; ?>', <?php echo $package_row['ID'] ?>)"><i class="fas fa-plus"></i></button>
												<br><br><br>
												<div class="table-responsive">
													<table id="qwerty" class="table table-bordered table-hover table-striped">
														<thead align="center"> 
															<th>#</th>
															<th>Item</th>
															<th>Price</th>
															<th>Action</th>
														</thead>
														<tbody align="center">
															<?php 
															$desc_id 			= explode('->', $package_row['description_id']);
															$description 		= explode('->', $package_row['description']);
															$description_price 	= explode('->', $package_row['description_price']);

															$i = 1; if($desc_id) foreach($desc_id as $item_key => $item_row){ 
																?>
																<tr>
																	<td><?php echo $i++; ?></td>
																	<td class="text-left"><?php echo $description[$item_key]; ?></td>
																	<td><?php echo ($description_price[$item_key] > 0)?'RM'.number_format($description_price[$item_key],2):''; ?></td>
																	<td class="text-center">
																		<div class="btn-group">
																			<button class="btn btn-warning btn-sm" title="Edit"
																			data-item="<?php echo $description[$item_key]; ?>"
																			data-price="<?php echo $description_price[$item_key]; ?>"
																			onclick="open_modal('update item <?php echo $package_row['category_name']; ?>',<?php echo $item_row; ?>, this)"
																			>
																				<i class="fas fa-edit"></i>
																			</button>
																			<button class="btn btn-danger btn-sm" title="Delete" id="deleteItemBtn"
																			data-itemid="<?php echo $item_row; ?>"
																			data-item="<?php echo $description[$item_key]; ?>"
																			onclick="save_stationery_item('delete','deleteItemBtn', this)"
																			>
																				<i class="fas fa-trash"></i>
																			</button>
																		</div>
																	</td>
																</tr>
															<?php } ?> 
														</tbody>
													</table>
												</div>
												<br>
											</div>
										</div>
										<br>
									<?php } ?>
								</div>
							</div>
						</div>
					</div>	
				</div>
			</div>
		</div>
	</div>
</section>

<div class="modal fade" id="stationery_item_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="title_modal"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<div id="stationery_modal_detail"></div>

				<div class="float-right">
					<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
					<button type="button" id="stationery_modal_btn_save" class="btn btn-primary">Submit</button>
				</div> 
			</div>
			<div class="modal-footer" style="display: block;">
				<div id="stationery_modal_detail_footer"></div>
			</div>
		</div>
	</div>
</div>

<script>
	var acc = document.getElementsByClassName("accordion");
	var i;

	for (i = 0; i < acc.length; i++) {
		acc[i].addEventListener("click", function() {
			this.classList.toggle("active1");
			var panel = this.nextElementSibling;
			if (panel.style.maxHeight) {
				panel.style.maxHeight = null;
			} else {
				panel.style.maxHeight = panel.scrollHeight + "px";
			} 
		});
	}

	function open_modal(mode, id = null, elem = null)
	{
		$('#stationery_modal_detail').html('');
		$('#stationery_modal_detail_footer').html('');

		var title = mode.toLowerCase().replace(/\b[a-z]/g, function(letter) {
			return letter.toUpperCase();
		});

		$('#title_modal').text(title);
		$('#stationery_item_modal').modal('show');
		var mode_split = mode.split(' ');

		if(mode_split[0] == 'new')
		{
			if(mode_split[1] == 'category'){
				$('#stationery_modal_btn_save').attr('onclick', 'save_stationery_category("new",'+"'stationery_modal_btn_save'"+')');
				
				var modal_body_temp = 
				'<div class="row" style="padding-bottom: 2rem;">\
					<div class="col-12">\
						<label>Category</label>\
						<input type="text" class="form-control" name="new_stationery_category" id="new_stationery_category" required>\
					</div>\
					<div class="col-12">\
						<label>Package</label>\
						<select class="form-control" name="new_stationery_package_category" id="new_stationery_package_category" required>\
							<option value="-1" selected disabled>-- Please Select --</option>\
							<?php if($stationery_package) foreach($stationery_package as $row){ ?>\
								<option value="<?php echo $row['package_group_id']; ?>"><?php echo $row['packages']; ?></option>\
							<?php } ?>\
						</select>\
					</div>\
				</div>';

				var modal_footer_temp = 
				'<label>List of Category</label>\
				<div class="table-responsive">\
					<table id="table" class="table table-bordered table-hover table-striped">\
						<thead><th>#</th><th>Category</th><th>Action</th></thead>\
						<tbody>\
							<?php if($stationery_category) foreach($stationery_category as $key => $val){ ?>\
								<tr>\
									<td class="text-center"><?php echo $key+1; ?></td>\
									<td><?php echo $val['category_name']; ?></td>\
									<td class="text-center">\
										<div class="btn-group">\
											<button class="btn btn-warning btn-sm" title="Edit"\
											data-catid="<?php echo $val['ID']; ?>"\
											data-catname="<?php echo $val['category_name']; ?>"\
											data-catpckid="<?php echo $val['package_group_id']; ?>"\
											onclick="open_modal('+"'update category'"+',<?php echo $val['ID']; ?>, this)"\
											>\
												<i class="fas fa-edit"></i>\
											</button>\
											<button class="btn btn-danger btn-sm" title="Delete" id="deleteCatBtn"\
											data-catid="<?php echo $val['ID']; ?>"\
											data-catname="<?php echo $val['category_name']; ?>"\
											onclick="save_stationery_category('+"'delete'"+','+"'deleteCatBtn'"+', this)">\
												<i class="fas fa-trash"></i>\
											</button>\
										</div>\
									</td>\
								</tr>\
							<?php } ?>\
						</tbody>\
					</table>\
				</div>';
			}else if(mode_split[1] == 'item'){
				$('#stationery_modal_btn_save').attr('onclick', 'save_stationery_item("new",'+"'stationery_modal_btn_save'"+')');
				
				var modal_body_temp = 
				'<div class="row" style="padding-bottom: 2rem;">\
					<div class="col-12">\
						<label>Category</label>\
						<input type="text" class="form-control" name="new_stationery_category_id" id="new_stationery_category_id" value="'+id+'" required hidden>\
						<input type="text" class="form-control" name="new_stationery_item" id="new_stationery_item" required>\
					</div>\
					<div class="col-12">\
						<label>Price (RM)</label>\
						<input type="text" class="form-control" name="new_stationery_item_price" id="new_stationery_item_price" required>\
					</div>\
				</div>';

				var modal_footer_temp = '';
			}

			$('#stationery_modal_detail').append(modal_body_temp);
			$('#stationery_modal_detail_footer').append(modal_footer_temp);
		}else{ //update
			if(id != null && id != 0)
			{
				if(mode_split[1] == 'category'){
					var catID 		= $(elem).data('catid');
					var catName 	= $(elem).data('catname');
					var catPckID 	= $(elem).data('catpckid');
					
					$('#stationery_modal_btn_save').attr('onclick', 'save_stationery_category("update",'+"'stationery_modal_btn_save'"+')');
				
					var modal_body_temp = 
					'<div class="row" style="padding-bottom: 2rem;">\
						<div class="col-12">\
							<label>Category</label>\
							<input type="text" class="form-control" name="update_stationery_category_id" id="update_stationery_category_id" value="'+catID+'" required hidden>\
							<input type="text" class="form-control" name="update_stationery_category" id="update_stationery_category" value="'+catName+'" required>\
						</div>\
						<div class="col-12">\
							<label>Package</label>\
							<select class="form-control" name="update_stationery_package_category" id="update_stationery_package_category" required>\
								<option value="-1" disabled>-- Please Select --</option>\
								<?php if($stationery_package) foreach($stationery_package as $row){ ?>\
									<option value="<?php echo $row['package_group_id']; ?>"><?php echo $row['packages']; ?></option>\
								<?php } ?>\
							</select>\
						</div>\
					</div>';

					$('#stationery_modal_detail').append(modal_body_temp);
					$('#update_stationery_package_category').val(catPckID);
				}else if(mode_split[1] == 'item'){
					var itemID 		= id;
					var itemName 	= $(elem).data('item');
					var itemPrice 	= $(elem).data('price');

					$('#stationery_modal_btn_save').attr('onclick', 'save_stationery_item("update",'+"'stationery_modal_btn_save'"+')');
				
					var modal_body_temp = 
					'<div class="row" style="padding-bottom: 2rem;">\
						<div class="col-12">\
							<label>Category</label>\
							<input type="text" class="form-control" name="update_stationery_category_id" id="update_stationery_item_id" value="'+itemID+'" required hidden>\
							<input type="text" class="form-control" name="update_stationery_item" id="update_stationery_item" value="'+itemName+'" required>\
						</div>\
						<div class="col-12">\
							<label>Price (RM)</label>\
							<input type="text" class="form-control" name="update_stationery_item_price" id="update_stationery_item_price" value="'+itemPrice+'" required>\
						</div>\
					</div>';

					$('#stationery_modal_detail').append(modal_body_temp);
					$('#update_stationery_package_category').val(catPckID);
				}

			}else{
				$('#title_modal').text(" ");
				$('#stationery_item_modal').modal('hide');

				iziToast.error({
					title: 'Error',
					message: "Some error has occured. Please contact Admin for assistant."
				});
			}
		}

		datatable = $("#table").dataTable({
			responsive: true,
			order: [],
			drawCallback: function() {
				$('[data-tooltip="tooltip"]').tooltip({
					trigger : 'hover'
				});
			}  
		});
	}

	function save_stationery_category(mode, btn_id, elem = null)
	{
		if((mode != null && mode != '') && (btn_id != null && btn_id != ''))
		{
			var btn_validate_msg = '';
			var category		 = '';
			var package_id		 = 0;
			var cat_id 			 = 0;

			if(mode == 'new')
			{
				category			= $('#'+mode+'_stationery_category').val();
				package_id			= $('#'+mode+'_stationery_package_category').val();
				btn_validate_msg 	= 'Add '+category+' in stationery category list?';
			}
			if(mode == 'update') 
			{
				cat_id 				= $('#'+mode+'_stationery_category_id').val();
				category			= $('#'+mode+'_stationery_category').val();
				package_id			= $('#'+mode+'_stationery_package_category').val();
				btn_validate_msg 	= 'Update to '+category+'?';
			}			
			if(mode == 'delete')
			{
				category			= $(elem).data('catname');
				cat_id 				= $(elem).data('catid');
				btn_validate_msg 	= 'Delete '+category+' from stationery category list?';
			}

			validateForm("#"+btn_id, btn_validate_msg, function() {
				$.ajax({
					type: 'POST',
					url: '<?php echo base_url('hr/serviceform/stationery_save_category'); ?>',
					data: {
						mode 		: mode,
						category 	: category,
						package_id	: package_id,
						cat_id		: cat_id,
					},
					dataType: 'JSON',
					success: function(data) {
						if(data.status == 'success')
						{
							iziToast.success({
								title: 'Success',
								message: data.msg
							});

							location.reload();
						}else{
							iziToast.error({
								title: 'Error',
								message: data.msg
							});
						}
					}
				});
			});
		}else{
			iziToast.error({
				title: 'Error',
				message: "Please make sure all details have been completed before submit. Thank You."
			});
		}
	}

	function save_stationery_item(mode, btn_id, elem = null)
	{
		if((mode != null && mode != '') && (btn_id != null && btn_id != ''))
		{
			var btn_validate_msg	= '';
			var category_id			= 0;
			var item_id		 	 	= 0;
			var item		 	 	= '';
			var price 			 	= 0;

			if(mode == 'new')
			{
				category_id			= $('#'+mode+'_stationery_category_id').val();
				item				= $('#'+mode+'_stationery_item').val();
				price				= $('#'+mode+'_stationery_item_price').val();
				btn_validate_msg 	= 'Add '+item+' in stationery item list?';
			}
			if(mode == 'update') 
			{
				item_id				= $('#'+mode+'_stationery_item_id').val();
				item				= $('#'+mode+'_stationery_item').val();
				price				= $('#'+mode+'_stationery_item_price').val();
				btn_validate_msg 	= 'Update to '+item+'?';
			}			
			if(mode == 'delete')
			{
				item_id 			= $(elem).data('itemid');
				item 				= $(elem).data('item');
				btn_validate_msg 	= 'Delete '+item+' from stationery item list?';
			}

			validateForm("#"+btn_id, btn_validate_msg, function() {
				$.ajax({
					type: 'POST',
					url: '<?php echo base_url('hr/serviceform/stationery_save_item'); ?>',
					data: {
						mode 		: mode,
						category_id : category_id,
						item_id		: item_id,
						item		: item,
						price		: price,
					},
					dataType: 'JSON',
					success: function(data) {
						if(data.status == 'success')
						{
							iziToast.success({
								title: 'Success',
								message: data.msg
							});

							location.reload();
						}else{
							iziToast.error({
								title: 'Error',
								message: data.msg
							});
						}
					}
				});
			});
		}else{
			iziToast.error({
				title: 'Error',
				message: "Please make sure all details have been completed before submit. Thank You."
			});
		}
	}
</script>