<?php
session_start();
if (!isset($_SESSION['user'])) {
    header("Location: /warungpojok/");
    exit;
}
include 'koneksi.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Dashboard Pembeli</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            font-family: Arial, sans-serif;
            background: #f4f6f9;
            margin: 0;
            min-height: 100vh;
            position: relative;
        }

        body::before{
            content: "";
            position: fixed;
            inset: 0;
            background: url('/warungpojok/images/logo.png') no-repeat center center;
            background-size: 60% auto;
            opacity: 0.05;
            z-index: -1;
            pointer-events: none;
        }

        .navbar{
            background: #28a745;
            color: white;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .menu{
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .btn-custom{
            background: #28a745;
            color: white;
            padding: 8px 15px;
            text-decoration: none;
            border-radius: 6px;
            transition: 0.3s;
        }

        .btn-custom:hover{
            opacity: 0.9;
            color: white;
        }

        .product-container{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 25px;
            justify-content: center;
        }

        .product{
            width: 250px;
            min-height: 420px;
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(4px);
            padding: 15px;
            border-radius: 14px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            transition: 0.3s;
        }

        .product:hover{
            transform: translateY(-5px);
        }

        .product img{
            width: 180px;
            height: 180px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: 0.3s;
        }

        .product img:hover{
            transform: scale(1.05);
        }

        .product h3{
            min-height: 60px;
            font-size: 18px;
        }

        .modal-content{
            border-radius: 15px;
        }
    </style>
</head>
<body>

<div class="navbar">
    <h2>🛒 Halo, <?= $_SESSION['user']; ?></h2>
    <div class="menu">
        <a href="/warungpojok/keranjang.php" class="btn-custom">🛒 Keranjang</a>
        <a href="orders.php" class="btn-custom">🕘 Riwayat</a>
        <a href="/warungpojok/logout.php" class="btn-custom">Logout</a>
    </div>
</div>

<div class="product-container">
<?php
$data = mysqli_query($conn, "SELECT * FROM produk");
while ($d = mysqli_fetch_assoc($data)) {
?>
    <!-- CARD PRODUK -->
    <div class="product">
        <img src="images/<?= $d['gambar']; ?>"
             alt="<?= $d['nama_produk']; ?>"
             data-bs-toggle="modal"
             data-bs-target="#modal<?= $d['id']; ?>">

        <h3><?= $d['nama_produk']; ?></h3>
        <p><b>Rp <?= number_format($d['harga']); ?></b></p>

        <?php if ($d['stok'] > 0) { ?>
            <a href="beli.php?id=<?= $d['id']; ?>" class="btn-custom">Tambah Keranjang</a>
        <?php } else { ?>
            <button class="btn btn-danger" disabled>Stok Habis</button>
        <?php } ?>
    </div>

    <!-- MODAL DETAIL PRODUK -->
    <div class="modal fade" id="modal<?= $d['id']; ?>" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title"><?= $d['nama_produk']; ?></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body text-center">
    <img src="images/<?= $d['gambar']; ?>"
         class="img-fluid rounded mb-3"
         style="max-height:250px; object-fit:cover;">

    <p><b>Harga:</b> Rp <?= number_format($d['harga']); ?></p>
    <p><b>Stok:</b> <?= $d['stok']; ?></p>

    <p class="<?= $d['stok'] == 0 ? 'text-danger' : 'text-success' ?>" style="line-height:1.8;">
    <?= $d['deskripsi']; ?>
</p>
                </div>

                <div class="modal-footer">
                    <?php if ($d['stok'] > 0) { ?>
                        <a href="beli.php?id=<?= $d['id']; ?>" class="btn btn-success">
                            Tambah ke Keranjang
                        </a>
                    <?php } else { ?>
                        <button class="btn btn-danger" disabled>Stok Habis</button>
                    <?php } ?>
                </div>

            </div>
        </div>
    </div>
<?php } ?>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>