<?php 
	include 'header.php';
 ?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - UMKM Galeri 3D</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
body {
    background: #f3f4f6;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1200px;
    margin: 5px auto;
    padding: 0 30px;
}
/* Pastikan jarak antar produk tidak dempet */
.produk-item {
  margin-bottom: 15px;
}

/* Dua kolom di HP (max 767px) */
@media (max-width: 767px) {
  .col-xs-6 {
    width: 50%;
    float: left;
    padding-left: 8px;
    padding-right: 8px;
  }

  .thumbnail {
    margin-bottom: 15px;
  }

  .thumbnail img {
    height: 160px !important;
  }

  .caption h3 {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .caption h4 {
    font-size: 16px;
  }
}

</style>
</head>
<body>
<!-- PRODUK TERBARU -->
<div class="container">
	<div class="row">
	<?php 
	$result = mysqli_query($conn, "SELECT * FROM produk");
	while ($row = mysqli_fetch_assoc($result)) {
		// Ambil data harga & diskon per produk
		$harga = $row['harga'];
		$diskon = $row['diskon'];

		// Hitung harga diskon jika ada
		if ($diskon > 0 && $diskon < $harga) {
			$harga_diskon = $harga - $diskon;
			$persen = round(($diskon / $harga) * 100);
		} else {
			$harga_diskon = $harga;
			$persen = 0;
		}
	?>
	<div class="col-xs-6 col-sm-4 col-md-3 produk-item">
		<div class="thumbnail" style="border-radius:8px; overflow:hidden; position: relative;">
			<!-- Gambar Produk -->
			<img src="image/produk/<?= $row['image']; ?>" 
				style="width: 100%; height: 180px; object-fit: cover; border-radius: 8px;">

			<!-- Diskon di pojok kanan atas -->
			<?php if ($diskon > 0 && $diskon < $harga): ?>
				<div style="position: absolute; top: 8px; right: 8px; background: #d9534f; 
							color: #fff; font-size: 12px; font-weight: bold; padding: 3px 6px; border-radius: 4px;">
					-<?= $persen; ?>%
				</div>
			<?php endif; ?>

			<!-- Caption Produk -->
			<div class="caption" style="padding:10px;">
				<h3><?= $row['nama']; ?></h3>

				<?php if ($diskon > 0 && $diskon < $harga): ?>
					<div style="display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;">
						<h4 style="color:#d9534f; margin:0; font-size:18px;">
							Rp <?= number_format($harga_diskon); ?>
						</h4>
						<h5 style="margin:0; color:#888; font-size:13px; display:flex; align-items:center;">
							<span style="text-decoration: line-through;">
								Rp <?= number_format($harga); ?>
							</span>
						</h5>
					</div>
				<?php else: ?>
					<h4 style="font-size:18px;">Rp <?= number_format($harga); ?></h4>
				<?php endif; ?>

				<?php if ($row['stok'] > 0): ?>
					<h5 style="font-style: italic; color: #000;">Tersedia <?= $row['stok']; ?></h5>
				<?php else: ?>
					<h5 style="font-style: italic; color: red; font-weight: bold;">Habis</h5>
				<?php endif; ?>
	
				<div class="row" style="margin-top:8px;">
					<div class="col-xs-6" style="padding-right:5px;">
						<a href="detail_produk.php?produk=<?= $row['kode_produk']; ?>" class="btn btn-warning btn-block" style="font-size:12px;">
							<i class="fas fa-info-circle"></i> Detail
						</a>
					</div>
					
					<div class="col-xs-6" style="padding-left:5px;">
						<?php if(isset($_SESSION['kd_cs'])){ ?>
							<a href="proses/add.php?produk=<?= $row['kode_produk']; ?>&kd_cs=<?= $kode_cs; ?>&hal=1" class="btn btn-success btn-block" style="font-size:12px;">
								<i class="glyphicon glyphicon-shopping-cart"></i> Tambah
							</a>
						<?php } else { ?>
							<a href="keranjang.php" class="btn btn-success btn-block" style="font-size:12px;">
								<i class="glyphicon glyphicon-shopping-cart"></i> Tambah
							</a>
						<?php } ?>
					</div>
				</div>
			</div>
		</div>
	</div>
	<?php } ?>
	</div>
</div>

</body>
</html>
