<?php 
include 'header.php';
include '../koneksi/koneksi.php';

// pesanan baru 
$result1 = mysqli_query($conn, "SELECT DISTINCT invoice FROM produksi WHERE terima = 0 AND tolak = 0");
$jml1 = mysqli_num_rows($result1);

// pesanan dibatalkan
$result2 = mysqli_query($conn, "SELECT DISTINCT invoice FROM produksi WHERE tolak = 1");
$jml2 = mysqli_num_rows($result2);

// pesanan diterima
$result3 = mysqli_query($conn, "SELECT DISTINCT invoice FROM produksi WHERE terima = 1");
$jml3 = mysqli_num_rows($result3);
?>

<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/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;
}
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Kartu dashboard */
.card-dashboard {
    flex: 1;
    min-width: 250px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 25px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-dashboard:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}
.card-dashboard h5 {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    margin-bottom: 8px;
}
.card-dashboard .number {
    font-size: 30px;
    font-weight: 700;
    color: #2d3436;
}
.card-dashboard .icon {
    position: absolute;
    right: 20px;
    top: 25px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
}
.icon-blue   { background: #007bff; }
.icon-red    { background: #dc3545; }
.icon-green  { background: #28a745; }

/* Responsif */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
    .card-dashboard {
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="container">
    <h2 style="width:100%; border-bottom:3px solid gray; font-size:40px; margin-bottom: 20px;"><b>Dashboard</b></h2>
    <div class="row">

        <!-- Pesanan Baru -->
        <div class="card-dashboard">
            <h5>PESANAN BARU</h5>
            <div class="number"><?= $jml1; ?></div>
            <div class="icon icon-blue"><i class="fas fa-shopping-cart"></i></div>
        </div>

        <!-- Pesanan Dibatalkan -->
        <div class="card-dashboard">
            <h5>PESANAN DIBATALKAN</h5>
            <div class="number"><?= $jml2; ?></div>
            <div class="icon icon-red"><i class="fas fa-times-circle"></i></div>
        </div>

        <!-- Pesanan Diterima -->
        <div class="card-dashboard">
            <h5>PESANAN DITERIMA</h5>
            <div class="number"><?= $jml3; ?></div>
            <div class="icon icon-green"><i class="fas fa-check-circle"></i></div>
        </div>

    </div>
</div>

</body>
</html>
