<?php $getItemId = $_GET['id']; ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#addForm").hide();
    $("#addBtn").click(function(){
        $("#addForm").slideToggle();
    });
	
	$.ajax({
		url: "item_table.php",
		type: "POST",
		cache: false,
		success: function(data){
			//alert(data);
			$('#tableItems').html(data); 
		}
	});
});
</script>

<div class="right_col" role="main">
	<div class="">
		<div class="page-title">
			<div class="title_left">
				<h3>Items <button id="addBtn" type="button" class="btn btn-dark">Add Item</button></h3>
			</div>
		</div>
		<div class="clearfix"></div>
		
		<div id="addForm" class="row">
			
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
					<div class="x_title">
						<h2>Add Item</h2>
						<div class="clearfix"></div>
					</div>

					<div class="x_content">
						<form id="addItemForm" class="form-horizontal form-label-left" method="post">
							
							<div class="item form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12" for="night">Title 
								</label>
								<div class="col-md-3 col-sm-3 col-xs-12">
									<input id="title" class="form-control col-md-3 col-xs-12" name="title" type="text" value="<?php echo getDetailByTable('items',$getItemId)['i_title']; ?>">
								</div>
							</div>

							<div class="ln_solid"></div>

							<div class="form-group">
								<div class="col-md-6 col-md-offset-3">
									<button id="send" type="submit" class="btn btn-success" name="submit">Add</button>
								</div>
							</div>

						</form>
						<script>
						$(document).ready(function() {
						$('#send').on('click', function() {
							$("#send").attr("disabled", "disabled");
							var title = $('#title').val();
							
								$.ajax({
									url: "item_add.php",
									type: "POST",
									data: {
										title: title,			
									},
									cache: false,
									success: function(dataResult){
										var dataResult = JSON.parse(dataResult);
										if(dataResult.statusCode==200){
											$("#send").removeAttr("disabled");
											$('#addItemForm').find('input:text').val('');
											$("#success").show();
											$('#success').html('Data added successfully !');
											$('#tableItems').html();
											
											$.ajax({
							url: "item_table.php",
							type: "POST",
							cache: false,
							success: function(data){
								//alert(data);
								$('#tableItems').html(data); 
							}
						});
										}
										else if(dataResult.statusCode==201){
										   alert("Error occured !");
										}

									}
								});
						});
							
							
						$(document).on("click", "#delete", function() {
						    if(confirm("confirm?")){
    							$.ajax({
    								url: "item_delete.php",
    								type: "POST",
    								cache: false,
    								data:{
    									id: $(this).attr("data-id")
    								},
    								success: function(dataResult){
    									$.ajax({
    										url: "item_table.php",
    										type: "POST",
    										cache: false,
    										success: function(data){
    											$('#tableItems').html(data); 
    										}
    									});
    								}
    							});
						    };
						});
					});
						</script>
									
					</div>
                </div>
            </div>
		</div>
		
			<?php if($_GET['update']){ ?>
		<div class="row">
			
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
					<div class="x_title">
						<h2>Add Item</h2>
						<div class="clearfix"></div>
					</div>

					<div class="x_content">
						<form class="form-horizontal form-label-left" method="post">
							
							<div class="item form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12" for="night">Title 
								</label>
								<div class="col-md-3 col-sm-3 col-xs-12">
									<input id="night" class="form-control col-md-3 col-xs-12" name="title" type="text" value="<?php echo getDetailByTable('items',$getItemId)['i_title']; ?>">
								</div>
							</div>

							<div class="ln_solid"></div>

							<div class="form-group">
								<div class="col-md-6 col-md-offset-3">
									<button id="send" type="submit" class="btn btn-success" name="update">Update</button>
								</div>
							</div>

						</form>
						<?php
							if(isset($_POST['update'])){
								$postTitle = $_POST['title'];

								mysqli_query($conn,"UPDATE items SET i_title='$postTitle'");
								
								//utilityLog(0,$getRoomId,$getUtilityTypeId,$_SESSION['admin'][1]." update payment RM".$postAmount." for ".$monthYear." on ".$postDate);

								header("Location: ?pagecontent=items");
							}
						?>
									
					</div>
                </div>
            </div>
		</div>
			<?php } ?>
		
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="x_panel">
					<div class="x_content">
						<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th>Title</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody id="tableItems">
								
							</tbody>	
						</table>
						<script>
						
						</script>
					</div>
				</div>
			</div>
        </div>
    </div>
</div>