<div class="container-fluid">
	<!-- ============================================================== -->
	<!-- Start Page Content -->
	<!-- ============================================================== -->
	<div class="row ">
		<div class="col-12">
			<div class="card card-outline-info">
				<div class="card-header">
					<h6 class="m-b-0 text-white">Product Category</h6>
				</div>

				<div class="card-body">
					<button type="button" class="btn btn-info open" data-toggle="collapse" data-target="#add">Add New</button>
					<div id="add" class="collapse">
						<div class="row justify-content-center">
							<div class="col col-md-5">
								<form id="addForm" method="post">
									<div class="form-group">
										<label class="control-label">Category</label>
										<input type="text" name="category_name" class="form-control" autocomplete="off" placeholder="Enter a product category">
									</div>
									<div class="form-group">
										<label class="control-label">Serial</label>
										<input type="text" name="serial" class="form-control" autocomplete="off" placeholder="Serial">
									</div>
									<?php
									$csrf = array(
										'name' => $this->security->get_csrf_token_name(),
										'hash' => $this->security->get_csrf_hash()
									);
									?>
									<input type="hidden" name="<?=$csrf['name'];?>" id="token_key" value="<?=$csrf['hash'];?>" class="form-control login_style" readonly>


									<div class="submit-btn-group text-xs-right">
										<button type="submit" class="btn btn-info submit_button">Submit</button>
										<button type="reset" class="btn btn-inverse reset_button">Cancel</button>
									</div>
								</form>
							</div>
						</div>
					</div>

					<div class="table-responsive">
						<br>
						<table id="categoryTable" class="table table-bordered table-striped">
							<thead>
							<tr>
								<th>#</th>
								<th width="45%">Category</th>
								<th width="15%">Serial</th>
								<th width="20%">Status</th>
								<th width="20%">Action</th>
							</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>


					<!--Modal Start-->
					<div class="modal fade" id="view_update_data" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h4 class="modal-title" id="exampleModalLabel1">View Category</h4>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								</div>
								<form id="updateForm" method="post">
									<div class="modal-body">
										<div class="form-group">
											<label class="control-label">Category</label>
											<input type="text" name="category_name" id="modal_category_name" class="form-control" autocomplete="off" placeholder="Type unit of measurement">
										</div>
										<div class="form-group">
											<label class="control-label">Serial</label>
											<input type="text" name="serial" id="modal_serial" class="form-control" autocomplete="off" placeholder="Serial">
										</div>
										<div class="form-group">
											<label class="control-label">Status</label>
											<select class="form-control" name="status" id="modal_status">
												<option value="">-select a status-</option>
												<option value="Active">Active</option>
												<option value="De-Active">De-Active</option>
											</select>
										</div>
									</div>
									<?php
									$csrf = array(
										'name' => $this->security->get_csrf_token_name(),
										'hash' => $this->security->get_csrf_hash()
									);
									?>
									<input type="hidden" name="<?=$csrf['name'];?>" id="token_key" value="<?=$csrf['hash'];?>" class="form-control login_style" readonly>
									<input type="hidden" name="category_id" id="modal_category_id" readonly>
									<div class="modal-footer">
										<button type="submit" class="btn btn-info update_button">Update</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

									</div>
								</form>
							</div>

						</div>
					</div>
					<!--Modal End-->
				</div>
			</div>
		</div>
		<!-- ============================================================== -->
	</div>

</div>
