<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: 0 18px;
		background-color: white;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}

	/*select #listStationeryType {
		max-height:100px; 
		overflow:auto;
	}*/
</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">Stationery Request Form 
					<?php echo ($ID > 0)?'#'.$ID:''; ?></h4>
				</div>
				<div class="card-body">
					<div class="card no-shadow">
						<div class="card-body">
							
							<?php if(!empty($ID)) { ?>
								<form id="stationeryForm" class="form" action="<?php echo base_url('hr/Serviceform/stationery_details_edit') ?>" method="POST" onsubmit="return confirm('Do you really want to submit the form?')">
							<?php } else{ ?>	
								<form id="stationeryForm" class="form" action="<?php echo base_url('hr/Serviceform/stationery_save') ?>" method="POST">
							<?php } ?>

								<input type="text" class="form-control" name="stationeryID" id="stationeryID" value="<?php echo $ID; ?>" hidden>

								<div class="form-row">
									<div class="col-12 col-sm-6">
										<div class="form-group">
											<label for="datereq">Requested by</label>
											<?php if(($ID == 0)){ ?>
												<input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo $_SESSION['user']['name']; ?>" readonly>

											<?php } else{ ?>
												<?php if(!empty($rsMasterStationeryReq)){ ?>
													<?php foreach($rsMasterStationeryReq as $row) { //debug($row); ?>
														<input type="text" class="form-control" name="reqName_id" id="reqName_id" value="<?php echo $row['requestor']; ?>" readonly>
													<?php }?>
												<?php }?>
											<?php }?>
										</div>
									</div>

									<div class="col-12 col-sm-6">
										<div class="form-group">
											<label for="department">Department</label>
											<?php if(($ID == 0)) { ?>
												<input type="text" class="form-control" name="department" id="department" value="<?php echo $_SESSION['user']['department_name']; ?>" readonly>

											<?php } else{ ?>
												<?php if(!empty($rsMasterStationeryReq)) { ?>
													<?php foreach($rsMasterStationeryReq as $row) { ?>
														<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $row['dept_name']; ?>" readonly>
													<?php }?>
												<?php }?>
											<?php }?>
										</div>
									</div>
								</div>

								<div class="form-row">
									<div class="col-12 col-sm-6">
										<div class="form-group">
											<label for="datereq">Date Request</label>
											<?php if($ID == 0) { ?>
												<input type="date" class="form-control" name="datereq" id="datereq" value="<?php echo date("Y-m-d"); ?>" readonly>

											<?php } else { ?>
												<?php if (!empty($rsMasterStationeryReq)) {?>
													<?php foreach ($rsMasterStationeryReq as $row) { ?>
														<input type="text" class="form-control" name="datereq" id="datereq" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($row['createdTS'])):''; ?>" readonly>
													<?php }?>
												<?php }?>
											<?php }?>
										</div>
									</div>
									<div class="col-12 col-sm-6">
										<div class="form-group">
											<label for="datetaken">Date Taken</label>
											<?php if($ID == 0) { ?>
												<input type="text" class="form-control datepicker" name="datetaken" id="datetaken" value="<?php echo date("Y-m-d"); ?>" >

											<?php } else { ?>
												<?php if (!empty($rsMasterStationeryReq)) {?>
													<?php foreach ($rsMasterStationeryReq as $row) { ?>
														<input type="text" class="form-control datepicker" name="datetaken" id="datetaken" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($row['date_taken'])):''; ?>" >
													<?php }?>
												<?php }?>
											<?php }?>
										</div>
									</div>
								</div>

								<div class="form-row">
									<div class="col-12">
										<div class="float-right" style="padding-top: 2rem;">
											<button type="submit" class="btn btn-primary">Submit</button>
										</div> 
									</div>
								</div>

								<hr>

								<div class="form-row">
									<div class="col-12">
										<label for="stationery"><h5><strong>Stationery Lists</strong></h5></label>
										<br>
										<?php //if(!empty($ID)){ ?>
										<?php if($rsStationeryItem) { //die(debug($rsStationeryItem)); ?>
											<?php foreach($rsStationeryItem as $row) { ?>
											<br>

											<?php// die(debug($row['item'])); ?>
											<a class="accordion p-2 bg-light float-right">
												<?php echo $row['category_name']; ?>
                                                <?php if(sizeof($row['item']) >=  1) {?>
												    <span class="badge badge-pill badge-danger"><?php echo sizeof($row['item']); ?></span>
                                                <?php } ?>
											</a>

											<div class="col-12 panel">
												<br>
												<div class="card-header-action d-print-none d-none d-sm-block">
													<div class=" form-row float-right">
														<a href="" data-toggle="modal" class="btn btn-primary" data-target="#stationery_item_modal" data-categoryname="<?php echo $row['category_name']; ?>"
														data-category_id="<?php echo $row['ID']; ?>"
														data-package_group_id="<?php echo $row['package_group_id'] ?>"
														data-stationery_id ="<?php echo $ID; ?>"
														onclick="open_add_modal(this)">Add New <?php echo $row['category_name']; ?></a>
													</div>
													<br>
												</div>
											
												<br><p></p>
												<div class="table-responsive">
													<table id="qwerty" class="table table-hover table-striped ">
														<thead align="center"> 
															<tr>
																<td>#</td>
																<td>Stationery Item</td>
																<td>Quantity</td>
																<td>Package</td>
																<td>Action</td>
															</tr>
														</thead>
														<tbody align="center">
															<?php $i = 1; if($row['item']) foreach($row['item'] as $rowItem) if($rowItem['quantity'] > 0){  ?>
																<?php //debug($rowItem); ?>
																<?php if(($rowItem['sv_stationery_id'] == $ID)) { ?>
																<tr>
																	<td><?php echo $i++; ?></td>
																	<td class="text-left"><?php echo $rowItem['description']; ?></td>
																	<td><?php echo $rowItem['quantity']; ?></td>
																	<td><?php echo $rowItem['package']; ?></td>
																	<td class="text-center">
		
																		<div class="btn-group btn-group-sm" role="group">
																			<a href="<?php echo base_url('hr/serviceform/stationery_form/'.$row['ID']); ?>" 
																				class="btn btn-outline-dark" 
																				data-toggle="modal" 
																				data-trigger="hover" 
																				data-tooltip="tooltip" 
																				title="Edit Form" 
																				onclick="open_edit_modal(this)" 
																				data-target="#stationery_item_modal_edit" 
																				data-categoryname_edit="<?php echo $row['category_name'];?>" 
																				data-category_id="<?php echo $row['ID']; ?>"
																				data-package_group_id="<?php echo $row['package_group_id'] ?>"
																				data-stationery_detail_id="<?php echo $rowItem['stationeryDetailID']; ?>"
																				data-description="<?php echo $rowItem['description']; ?>"
																				data-description_id="<?php echo $rowItem['sv_stationery_category_detail_id']; ?>"
																				data-quantity1="<?php echo $rowItem['quantity']; ?>"
																				data-package="<?php echo $rowItem['package']; ?>"
																				data-package_id="<?php echo $rowItem['category_package_id']; ?>">
																				<i class="far fa-edit"></i>
																			</a>
																			<button type="button" id="deleteButtonForm" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Delete "><i class="far fa-trash-alt" onclick="deleteStationery(<?php echo $rowItem['stationeryDetailID']; ?>);"></i></button>
																		</div>
																	</td>
																</tr>
																<?php } ?>
															<?php } ?> 
														</tbody>
													</table>
												</div>
											</div>
											<?php } ?>
										<?php } ?>
									</div>
								</div>
							</form>
						</div>
					</div>	
				</div>
			</div>
		</div>
	</div>
</section>

<?php echo (!empty($approval))?$approval:''; ?>

<div class="modal fade" id="stationery_item_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-md" 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">
				<form action="<?php echo base_url('hr/Serviceform/stationery_details_save' ) ?>" method="post" onsubmit="return confirm('Do you really want to submit the form?')">
					<input type="text" name="titleStat" id="titleStat" hidden>
					<input type="text" name="categoryIDstat" id="categoryIDstat" hidden>
					<input type="text" name="package_groupIDstat" id="package_groupIDstat" hidden>
					<!-- <input type="text" name="package_ID" id="package_ID" hidden> -->				

					<div class="row">
						<div class="col-12 mb-6">
							<label>Type</label>
								<select class="form-control" id="listStationeryType" name="listStationeryType" required>
							</select>
						</div>
					</div><br>

					<?php //debug($row['item'] ); ?>

					<input type="text" class="form-control" name="stationery_id" id="stationery_id" value="<?php echo $ID; ?>" hidden>

					<div class="row" style="padding-bottom: 4rem;">
						<div class="col-6">
							<label>Quantity</label>
							<input class="form-control" type="number" id="quantity" name="quantity" min="1" max="10" value="" required>
						</div>

						<div class="col-6">
							<label>Package</label>
							<select class="form-control" id="package_group" name="package_group" required>
								<!-- <option value="">1 Ream</option> -->
							</select>
						</div>
					</div>

					<div class="float-right">
						<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-primary">Submit</button>
					</div> 
				</form>
			</div>
		</div>
	</div>
</div>	

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

			<div class="modal-body">
				<form action="<?php echo base_url('hr/Serviceform/stationery_edit_details_save') ?>" method="post" onsubmit="return confirm('Do you really want to submit the form?')">
					<input type="text" name="categoryID_edit" id="categoryID_edit" hidden>
					<input type="hidden" name="stationeryDetailID_edit" id="stationeryDetailID_edit">				

					<div class="row">
						<div class="col-12 mb-6">
							<label>Type</label>
								<select class="form-control" id="listStationeryType_edit" name="listStationeryType_edit" required>
							</select>
						</div>
					</div><br>

					<?php //debug($row['item'] ); ?>

					<input type="text" class="form-control" name="stationery_id" id="stationery_id" value="<?php echo $ID; ?>" hidden>

					<div class="row" style="padding-bottom: 4rem;">
						<div class="col-6">
							<label>Quantity</label>
							<input class="form-control" type="number" id="quantity_edit" name="quantity_edit" min="1" max="10" value="" required>
						</div>

						<div class="col-6">
							<label>Package</label>
							<select class="form-control" id="package_group_edit" name="package_group_edit" required>
								<!-- <option value="">1 Ream</option> -->
							</select>
						</div>
					</div>

					<div class="float-right">
						<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-primary">Submit</button>
					</div> 
				</form>
			</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_add_modal(elem){
	/* 1. tukar modal title /
	2. load json type/dropdown /
	3. load package /
	4. assign save button action 
	5. modal show /
	*/

	var titles       	= $(elem).data('categoryname');
	var categoryID      = $(elem).data('category_id');
	var packageGroupID	= $(elem).data('package_group_id');

	//console.log(packageGroupID);
	$('#title_modal').html('Add New ' + titles);
	$('#listStationeryType').val('');
	$('#quantity').val('');
	$('#package_group').val('');
	$('#save').val(categoryID);
	

	$.ajax({
		url: '<?php echo base_url('hr/Serviceform/get_stationery_list'); ?>',
		type: 'POST',
		data:{
			categoryID:categoryID,
			packageGroupID:packageGroupID
		},
		dataType: 'JSON',
		success: function(data){
			
			
			$('#listStationeryType').html('');
			$('#nodata').html('');

			let template = '<option value="" disabled selected>--Please Select--</option>';
			$('#listStationeryType').append(template);

			let details = data.details.stationeryCategoryDetails;
			if(details != null)
			{
				$.each(details,function(key,content){
					//console.log(content);

					let template = `<option value="${content.ID}" >${content.description}</option>`;
					$('#listStationeryType').append(template);
				});
			} else {
				$('#nodata').append('No data details.');
			}

			$('#package_group').html('');

			 let template1 = '<option value="" disabled selected>--Please Select--</option>';
			 $('#package_group').append(template1);

			let packages = data.details.stationeryPackage;
			//console.log(data.details);
			if(packages != null)
			{
				$.each(packages,function(key,value){
					//console.log(key);
				
					let template2 = `<option value="${value.ID}" >${value.package}</option>`;
					$('#package_group').append(template2);
				});
			} else {
				$('#nodata').append('No data details.');
			}

		},
		error:function(err){
			console.log('Failed to fetch stationery details');
		}
	});
}

function open_edit_modal(elem){

	var titles       			= $(elem).data('categoryname_edit');
	var stationeryDetailID		= $(elem).data('stationery_detail_id');
	var stationeryQuantity		= $(elem).data('quantity1');
	var categoryID      		= $(elem).data('category_id');
	var packageGroupID			= $(elem).data('package_group_id');
	var stationeryDescription 	= $(elem).data('description');
	var stationeryDescriptionID = $(elem).data('description_id');
	var stationeryPackage 		= $(elem).data('package');
	var stationeryPackageID 	= $(elem).data('package_id');


	$('#title_modal_edit').html('Edit ');
	$('#categoryID_edit').val(categoryID);
	$('#stationeryDetailID_edit').val(stationeryDetailID);
	$('#quantity_edit').val(stationeryQuantity);
	$('#package_group_edit').val(stationeryPackageID);
	$('#save').val(categoryID);

	console.log(stationeryDetailID);
	console.log(stationeryDescriptionID);
	console.log(stationeryPackageID);
	console.log(stationeryQuantity);


	$.ajax({
		url: '<?php echo base_url('hr/Serviceform/get_stationery_list'); ?>',
		type: 'POST',
		data:{
			categoryID 				:categoryID,
			packageGroupID 			:packageGroupID,
			stationeryDetailID 		:stationeryDetailID,
			stationeryDescription 	:stationeryDescription,
			stationeryDescriptionID :stationeryDescriptionID,
			stationeryQuantity 		:stationeryQuantity,
			stationeryPackage 		:stationeryPackage,
			stationeryPackageID		:stationeryPackageID
		},
		dataType: 'JSON',
		success: function(data){
			
			
			$('#listStationeryType_edit').html('');
			$('#nodata').html('');

			let template = '<option value="">--Please Select--</option>';
			$('#listStationeryType_edit').append(template);


			let details = data.details.stationeryCategoryDetails;
			if(details != null)
			{
				$.each(details,function(key,content){
					if(content.ID == stationeryDescriptionID){
						let template = `<option value="${content.ID}" selected>${content.description}</option>`;
						$('#listStationeryType_edit').append(template);
					}else{
						let template = `<option value="${content.ID}">${content.description}</option>`;
						$('#listStationeryType_edit').append(template);
					}
					
				});
			} else {
				$('#nodata').append('No data details.');
			}

			$('#package_group_edit').html('');
			$('#nodata').html('');

			let template1 = '<option value="">--Please Select--</option>';
			$('#package_group_edit').append(template1);


			let packages = data.details.stationeryPackage;
			if(packages != null)
			{
				$.each(packages,function(key,value){
					if(value.ID == stationeryPackageID){
						let template2 = `<option value="${value.ID}" selected>${value.package}</option>`;
						$('#package_group_edit').append(template2);
					}else{ 
						let template2 = `<option value="${value.ID}">${value.package}</option>`;
						$('#package_group_edit').append(template2);
					}
				
				});
			} else {
				$('#nodata').append('No data details.');
			}

		},
		error:function(err){
			console.log('Failed to fetch stationery details');
		}
	});
}

function deleteStationery (ID) {
	validateForm("#deleteButtonForm", "Delete this list?", function() {
		$.ajax({
			url:'<?php echo base_url('hr/serviceform/deleteStationeryListForm') ?>',
			data: {
				stationery_id : ID,
			},
			type: 'post',
			dataType: 'json',
			success: (data) => {
				if(data.status == "Success") {

				localStorage.setItem("status", data.status);
				localStorage.setItem("msg", data.msg);

				location.reload();

				// redirect(base_url('hr/serviceform/hotel_list'));
				}
			}
		});
	});
}

</script>