<?php
session_start();
date_default_timezone_set('Asia/Jakarta');
if(!isset($_SESSION['admin'])){
    header("Location: /warungpojok/admin.php");
    exit;
}
include 'koneksi.php';

$data = mysqli_query($conn, "SELECT * FROM produk");
$totalProduk = mysqli_num_rows($data);

$nilaiProduk = mysqli_fetch_assoc(
    mysqli_query($conn, "SELECT SUM(harga * stok) as total_nilai FROM produk")
)['total_nilai'];
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Dashboard Admin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>

    .table{
    border-radius:12px;
    overflow:hidden;
}

.table thead{
    background:linear-gradient(135deg,#43a047,#66bb6a);
    color:white;
}

.table tbody tr{
    transition:0.2s;
}

.table tbody tr:hover{
    background:#e8f5e9;
    transform:scale(1.002);
}

.card{
    transition:0.3s;
}

.card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

body{
    font-family: Arial, sans-serif;
    background: #f4f6f9;
    margin: 0;
}

.navbar{
    background: linear-gradient(90deg,#ff5722,#f44336);
    color: white;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand{
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand img{
    width: 70px;
    background: white;
    padding: 5px;
    border-radius: 10px;
}

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

.btn{
    padding: 10px 18px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.tambah{ background:#28a745; }
.logout{ background:#212529; }
.edit{ background:#007bff; }
.hapus{ background:#dc3545; }

.container{
    width: 95%;
    margin: 25px auto;
}

.table-box,.card{
    background: white;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.title{
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

table{
    width: 100%;
    border-collapse: collapse;
}

th{
    background: #f44336;
    color: white;
}

th,td{
    padding: 14px;
    text-align: center;
    border: 1px solid #ddd;
}

td img{
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}

.stats{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    margin-top: 25px;
}

.card{
    text-align: center;
}

.card h3{
    margin: 0;
    color: #666;
}

.card p{
    font-size: 28px;
    color: #f44336;
    font-weight: bold;
}

/* BADGE STOK */
.badge{
    padding: 8px 14px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
}

.habis{ background:#dc3545; }
.tipis{ background:#ff5722; }
.hampir{
    background:#ffc107;
    color:black;
}
.aman{ background:#28a745; }

body{
    background: #f4f6f9;
    position: relative;
    min-height: 100vh;
}

body{
    font-family: Arial, sans-serif;
    background: #f4f6f9;
    margin: 0;
    position: relative;
    min-height: 100vh;
}

body{
    font-family: Arial, sans-serif;
    background: #f4f6f9;
    margin: 0;
    min-height: 50vh;
    position: relative;
}

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



</style>
</head>
<body>

<div class="navbar">
    <div class="brand">
        <img src="/warungpojok/images/logo.png" alt="Logo">
        <div>
            <h2>Warung Pojok Online</h2>
            <small>Dashboard Admin</small>
        </div>
    </div>

    <div class="menu">
        <a href="tambah.php" class="btn tambah">+ Tambah Produk</a>
        <a href="pesanan.php" class="btn tambah">📦 Pesanan Masuk</a>
        <a href="/warungpojok/logout.php" class="btn logout">Logout</a>
    </div>
</div>

<div class="container">
    <div class="table-box">
        <div class="title">Data Produk</div>

        <table class="table table-hover align-middle text-center">
    <tr>
        <th>No</th>
        <th>Nama Produk</th>
        <th>Harga</th>
        <th>Stok</th>
        <th>Gambar</th>
        <th>Aksi</th>
    </tr>

    <?php $no=1; while($d=mysqli_fetch_assoc($data)){ ?>
    <tr>
        <td><?= $no++ ?></td>
        <td><?= $d['nama_produk'] ?></td>
        <td>Rp <?= number_format($d['harga']) ?></td>

        <td>
            <?php
            if($d['stok'] == 0){
                echo "<span class='badge habis'>Habis</span>";
            } elseif($d['stok'] < 5){
                echo "<span class='badge tipis'>{$d['stok']} - Menipis</span>";
            } elseif($d['stok'] < 10){
                echo "<span class='badge hampir'>{$d['stok']} - Hampir Habis</span>";
            } else {
                echo "<span class='badge aman'>{$d['stok']} - Aman</span>";
            }
            ?>
        </td>

        <td>
            <a href="#" data-bs-toggle="modal" data-bs-target="#detail<?= $d['id'] ?>">
                <img src="images/<?= $d['gambar'] ?>" alt="<?= $d['nama_produk'] ?>">
            </a>
        </td>

        <td>
            <a href="edit.php?id=<?= $d['id'] ?>" class="btn btn-primary btn-sm rounded-pill">
            <i class="bi bi-pencil"></i>
            </a>

            <a href="hapus.php?id=<?= $d['id'] ?>" class="btn btn-danger btn-sm rounded-pill"
            onclick="return confirm('Yakin hapus produk?')">
            <i class="bi bi-trash"></i>
            </a>
        </td>
    </tr>

    <!-- MODAL DETAIL -->
    <div class="modal fade" id="detail<?= $d['id'] ?>" tabindex="-1">
        <div class="modal-dialog">
            <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'] ?>" width="200" class="mb-3">
                    <p><b>Harga:</b> Rp <?= number_format($d['harga']) ?></p>
                    <p><b>Stok:</b> <?= $d['stok'] ?></p>
                    <p><?= $d['deskripsi'] ?></p>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
</table>

    </div>

    <div class="row mt-4 g-4">

    <div class="col-md-6">
        <div class="card shadow-lg border-0 rounded-4 p-3 bg-success bg-gradient text-white">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-1">Jumlah Produk</h6>
                    <h2 class="fw-bold"><?= $totalProduk ?></h2>
                </div>
                <i class="bi bi-box-seam fs-1 opacity-75"></i>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow-lg border-0 rounded-4 p-3 bg-primary bg-gradient text-white">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-1">Nilai Produk</h6>
                    <h2 class="fw-bold">Rp <?= number_format($nilaiProduk) ?></h2>
                </div>
                <i class="bi bi-cash-stack fs-1 opacity-75"></i>
            </div>
        </div>
    </div>

</div>
</div>

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

</body>
</html>