<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">
					<h5 class="card-title float-left">Stationery Online Form</h5>
				</div>
				<div class="card-body">
					<div class="card no-shadow">
						<div class="card-body">
							<form id="profileForm" class="form">

								<div class="form-row">
									<div class="col-12 col-sm-6">
										<div class="form-group">
											<label for="userName">Full Name</label>
											<input type="text" class="form-control" name="userName" id="userName" placeholder="Enter user's name." value="">
										</div>
									</div>

									<div class="col-12 col-sm-6">
										<div class="form-group">
											<label for="userEmail">Email</label>
											<input type="text" required data-parsley-error-message="Email is required." class="form-control" name="userEmail" id="userEmail" placeholder="Enter user's email." value="" >
										</div>
									</div>

									
									<div class="col-12 col-sm-6">
										<div class="form-group">
											<label for="datereq">Date Request</label>
											<input type="date" class="form-control" name="datereq" id="datereq" value="">
										</div>
									</div>

									
									<div class="col-12 col-sm-6">
										<div class="form-group">
											<label for="department">Department</label>
											<select class="form-control">
												<option value="audit">Audit</option>
												<option value="tax">Tax</option>
												<option value="gst">GST</option>
												<option value="secretary">Secretary</option>
												<option value="account">Account</option>
												<option value="it">IT</option>
												<option value="cf">Corporate Finance</option>
												<option value="po">Partner Office</option>
												<option value="ssd">SSD</option>
												<option value="syariah">Syariah</option>
												
											</select>
											
										</div>
									</div>   
								</div>

								<div class="form-row">
									<div class="col-12">
										<div class="p-2 bg-light">
											Paper
											<a href="#paperDetails" class="float-right" data-toggle="collapse"><i class="fas fa-plus "></i></a>
										</div>
										<div id="paperDetails" class="col-12 collapse">
										<br>
											<div class="table-responsive">
												<table id="qwerty" class="table table-hover table-striped ">
													<thead> 
														<tr>
															<td>
															</td>
															<td>
																1 Ream
															</td>
															<td>
																2 Ream
															</td>
															<td>
																1 Box
															</td>
															<td>
																2 Boxs
															</td>
															<td>
																3 Boxs
															</td>
														</tr>
													</thead>

													<tbody>
														<tr>
															<td>
																PAPER A4 (70GSM) PAPER WHITE (500'S)
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>

														</tr>

														<tr>
															<td>
																PAPER A4 (80GSM) PAPER WHITE (500'S)
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>

														</tr>

														<tr>
															<td>
																PAPER A4 (70GSM) PAPER PINK (500'S)
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>

														</tr>


														<tr>
															<td>
																PAPER A4 (70GSM) PAPER YELLOW COLOR
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>

														</tr>


														<tr>
															<td>
																PAPER A4 (70GSM) PAPER GREEN (500'S)
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>

														</tr>

														<tr>
															<td>
																PAPER A4 (70GSM) PAPER PEACH (500'S)
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>

														</tr>

														<tr>
															<td>
																PAPER A4 (70GSM) PAPER BLUE (500'S)
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>
															<td>
																<input type="checkbox" name="1" value=""><br>
															</td>

														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>	
								<br>	

								<div class="form-row">
									<div class="col-12">
										<div class="p-2 bg-light">
											Pen/Pencil/Highlighter
											<a href="#penDetails" class="float-right" data-toggle="collapse"><i class="fas fa-plus "></i></a>
										</div>
											
										<div id="penDetails" class="col-12 collapse">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit,
											sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
											quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
										</div>
									</div>
								</div>		
								<br>		
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>


<script>


    // $('table.asap').DataTable( {
    //     "paging":   false,
    //     "ordering": false,
    //     "info":     false
    // } );
	
	
</script>
												
												
												