<?php include "../koneksi.php"; ?>
<div class="row">
<div class="col-md-6">
<p>
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-tambah">
	<i class="bi bi-plus-square"></i>&ensp;Tambah Data</button>
</p>	
</div>
<div class="col-md-6">
	 <nav>
    <ol class="breadcrumb">
		<li class="breadcrumb-item">Produksi</li>
        <li class="breadcrumb-item">Table Data Product</li>
    </ol>
</nav>
</div>
</div>
<div style="width:100%;height500px;overflow:scroll;" >
<table id="example" class="display nowrap" style="width:100%">
        <thead>
		<tr>
			<th width="5%">
				#
			</th>
			<th width="10%">
				Nomor Material 
			</th>
			<th width="30%">
				Nama Material
			</th>
			<th width="5%">
				SLoc
			</th>
			<th width="5%">
				Quantity Unit
			</th>
			<th width="25%">
				Folder
			</th>
			<th width="20%">
				Opsi
			</th>
		</tr>
		</thead>
		<tbody>
			<?php 
				$no = 1;
				$data = mysqli_query ($koneksi, " select 
														ProductID,
														Material,
														ItemDescription,
														SLoc,
														QtyUnit,
														Folder
												  from 
												  product 
												  order by ProductID DESC");
				
				while($row = mysqli_fetch_array ($data)):
			?>
		<tr>
			<td width="5%">
				<?php echo $no++; ?>
			</td>
			<td width="10%">
				<?php echo $row['Material']; ?>
			</td>
			<td width="30%">
				<?php echo substr($row['ItemDescription'], 0, 50); ?>
			</td>
			<td width="5%">
				<?php echo $row['SLoc']; ?>
			</td>
			<td width="5%">
				<?php echo $row['QtyUnit']; ?>
			</td>
			<td width="25%">
				<?php echo substr($row['Folder'], 0, 70); ?>
			</td>
			<td width="20%">
				<a href="#" style="color: #4682B4" class='editbtn' id="standard" data-id="<?php echo $row['ProductID']; ?>"><i class="bi bi-shield-fill-check"></i> Dimensi</a>&ensp;|&ensp;
				<a href="#" style="color: #4682B4" class='editbtn' id="addstd" data-id="<?php echo $row['ProductID']; ?>"><i class="bi bi-shield-fill-check"></i> ADD_STD </a>&ensp;|&ensp; 
				<a href="#" style="color: #DAA520" class='editbtn' id="edit" data-id="<?php echo $row['ProductID']; ?>"><i class="bi bi-pen-fill"></i> Edit</a>&ensp;|&ensp; 
				<a href="#" style="color: #DC143C" data-href="product/hapus.php?id=<?php echo $row['ProductID']; ?>" data-toggle="modal" data-target="#confirm-delete"><i class="bi bi-trash-fill"></i> Hapus</a> 
			</td>
		</tr>
			<?php endwhile; ?>
		</tbody>
	</table>
	</div>
		<!-- Modal -->
		<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
            
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Kofirmasi Hapus</h4>
                </div>
            
                <div class="modal-body">
                    <p>Apakah anda mau melanjutkan menghapus data?</p>
                    <p class="debug-url"></p>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-danger btn-ok">Delete</a>
                </div>
            </div>
        </div>
    </div>

	<div id="modal-standard" class="modal fade" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<form role="form" id="form-edit" method="post" action="product/input-std.php" autocomplete="off">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Input Data Standard</h4>
				</div>
					<div class="modal-body">
						<div id="data-standard">
						
						</div>				
					</div>
					
					<div class="modal-footer">
          <button type="button" class="btn btn-info" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn btn-primary" >Simpan</button>
					</div>
				</form>		
			</div>
		</div>
	</div>

	<div id="modal-addstd" class="modal fade" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<form role="form" id="form-edit" method="post" action="product/input-addstd.php" autocomplete="off">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Input Data Additional Standard</h4>
				</div>
					<div class="modal-body">
						<div id="data-addstd">
						
						</div>				
					</div>
					
					<div class="modal-footer">
          <button type="button" class="btn btn-info" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn btn-primary" >Simpan</button>
					</div>
				</form>		
			</div>
		</div>
	</div>

	<script>
	$('#confirm-delete').on('show.bs.modal', function(e) {
		$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
		
	});

	$(document).on('click','#standard',function(e){
		e.preventDefault();
		$("#modal-standard").modal('show');
		$.post('product/std.php',
			{id:$(this).attr('data-id')},
			function(html){
				$("#data-standard").html(html);
			}   
		);
	});

	$(document).on('click','#addstd',function(e){
		e.preventDefault();
		$("#modal-addstd").modal('show');
		$.post('product/addstd.php',
			{id:$(this).attr('data-id')},
			function(html){
				$("#data-addstd").html(html);
			}   
		);
	});

	$("#form-standard").submit(function(e) {
		e.preventDefault();
		
		var dataform = $("#form-standard").serialize();
		$.ajax({
			url: "product/input-std.php",
			type: "post",
			data: dataform,
			success: function(result) {
				var hasil = JSON.parse(result);
				if (hasil.hasil !== "sukses") {
				} else {
					$('#modal-tambah-so').modal('hide');
					$("#myprodId").val('');
					$("#mystd").val('');
					$("#mycl").val('');
					$("#myalw").val('');
				}
			}
		});
	});

    $(document).ready(function () {
		$('#example').DataTable({
			scrollX: true,
			scrollY: true,
		});
	});
    </script>
