<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<style>
    .dashboard-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.3s ease-in-out, box-shadow 0.4s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-card:hover {
    transform: translateY(-4px);
}
.dashboard-card.bg-light {
    background-color: #f8f9fa !important; 
    color: #343a40 !important; 
}

.dashboard-card.bg-light:hover {
    box-shadow: 0 0 20px rgba(248, 249, 250, 0.6);
}

.row > [class*="col-"] {
  padding-bottom: 10px; 
}

    .dashboard-card .card-body {
        position: relative;
        z-index: 2;
    }

    .dashboard-card .card-body h6,
    .dashboard-card .card-body p {
        margin: 0;
    }

    .dashboard-card::before {
        content: attr(data-icon);
        position: absolute;
        font-family: "Bootstrap Icons";
        font-size: 80px;
        right: 15px;
        bottom: 10px;
        opacity: 0.1;
        z-index: 1;
        color: #fff;
    }

.dashboard-card.bg-primary:hover {
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.6);
}

.dashboard-card.bg-success:hover {
    box-shadow: 0 0 20px rgba(25, 135, 84, 0.6);
}

.dashboard-card.bg-warning:hover {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
}

.dashboard-card.bg-danger:hover {
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.6);
}

.dashboard-card.bg-info:hover {
    box-shadow: 0 0 20px rgba(13, 202, 240, 0.6);
}

.dashboard-card.bg-secondary:hover {
    box-shadow: 0 0 20px rgba(108, 117, 125, 0.6);
}
.dashboard-card.bg-dark:hover {
    box-shadow: 0 0 20px rgba(248, 249, 250, 0.6);
}
.dashboard-card.bg-light:hover {
    box-shadow: 0 0 20px rgba(33, 37, 41, 0.6);
}


    /* Soft color overrides */
    .bg-primary { background-color: #6c9bd1 !important; }
    .bg-success { background-color: #7ccba2 !important; }
    .bg-info    { background-color: #64b5f6 !important; }
    .bg-secondary { background-color: #b0bec5 !important; }
    .bg-warning { background-color: #ffe082 !important; }
    .bg-danger  { background-color: #ef9a9a !important; }
    .bg-dark { background-color: #6c757d !important; }
    .bg-light { background-color: #f5f5f5 !important; }

    .table th, .table td {
        vertical-align: middle;
    }
    @media (max-width: 767px) {
        h4, h5 {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 576px) {
    .dashboard-card .card-body h6 {
        font-size: 0.85rem;
    }

    .dashboard-card .card-body p {
        font-size: 1.2rem;
    }

    .dashboard-card::before {
        font-size: 50px;
        right: 10px;
        bottom: 5px;
    }

    .dashboard-card {
        padding: 0.5rem;
    }

    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .card-header h6 {
        font-size: 0.95rem;
    }
}

</style>

<div class="container-fluid px-3 px-md-4">
    <h4 class="mb-4">Dashboard</h4>

    <div class="row row-cols-2 row-cols-md-4 g-3">
    <!-- Total Cards with Links -->
    <div class="col-6 col-md-3">
        <a href="<?= base_url('admin/item') ?>" class="dashboard-card  card text-white bg-primary d-block position-relative">
            <div class="card-body position-relative">
                <h6 class="card-title"><i class="bi bi-box-seam me-1"></i> Total Produk</h6>
                <p class="card-text fs-4"><?= esc($totalProducts) ?></p>
                <i class="bi bi-box-seam position-absolute end-0 bottom-0 opacity-25 pe-3 pb-2 display-1"></i>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3">
        <a href="<?= base_url('admin/supplier') ?>" class="dashboard-card  card text-white bg-success d-block position-relative" >
            <div class="card-body position-relative">
                <h6 class="card-title"><i class="bi bi-truck me-1"></i> Total Supplier</h6>
                <p class="card-text fs-4"><?= esc($totalSuppliers) ?></p>
                <i class="bi bi-truck position-absolute end-0 bottom-0 opacity-25 pe-3 pb-2 display-1"></i>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3">
        <a href="<?= base_url('admin/customer') ?>" class="dashboard-card  card text-white bg-info d-block position-relative" >
            <div class="card-body position-relative">
                <h6 class="card-title"><i class="bi bi-people me-1"></i> Total Customer</h6>
                <p class="card-text fs-4"><?= esc($totalCustomers) ?></p>
                <i class="bi bi-people position-absolute end-0 bottom-0 opacity-25 pe-3 pb-2 display-1"></i>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3">
        <a href="<?= base_url('admin/users') ?>" class="dashboard-card  card text-white bg-secondary d-block position-relative" >
            <div class="card-body position-relative">
                <h6 class="card-title"><i class="bi bi-person-circle me-1"></i> Total User</h6>
                <p class="card-text fs-4"><?= esc($totalUsers) ?></p>
                <i class="bi bi-person-circle position-absolute end-0 bottom-0 opacity-25 pe-3 pb-2 display-1"></i>
            </div>
        </a>
    </div>

    <div class="col-6 col-md-3">
        <div class="dashboard-card card text-white bg-warning d-block position-relative" >
            <div class="card-body position-relative">
                <h6 class="card-title"><i class="bi bi-clipboard-data me-1"></i> Total Stok</h6>
                <p class="card-text fs-4"><?= esc($totalStock) ?></p>
                <i class="bi bi-clipboard-data position-absolute end-0 bottom-0 opacity-25 pe-3 pb-2 display-1"></i>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-3">
        <a href="<?= base_url('admin/report/summary') ?>" class="dashboard-card card text-white bg-danger d-block position-relative" >
            <div class="card-body position-relative">
                <h6 class="card-title"><i class="bi bi-cash-stack me-1"></i> Total Penjualan</h6>
                <p class="card-text fs-4">Rp <?= number_format($totalSales, 0, ',', '.') ?></p>
                <i class="bi bi-cash-stack position-absolute end-0 bottom-0 opacity-25 pe-3 pb-2 display-1"></i>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3">
    <a href="<?= base_url('admin/report/items') ?>" class="dashboard-card card text-white bg-dark d-block position-relative">
        <div class="card-body position-relative">
            <h6 class="card-title"><i class="bi bi-bag-check me-1"></i> Total Qty Terjual</h6>
            <p class="card-text fs-4"><?= esc($totalQtySold) ?></p>
            <i class="bi bi-bag-check position-absolute end-0 bottom-0 opacity-25 pe-3 pb-2 display-1"></i>
        </div>
    </a>
</div>
<div class="col-6 col-md-3">
    <a href="<?= base_url('admin/report/sales') ?>" class="dashboard-card card text-white bg-light d-block position-relative">
        <div class="card-body position-relative">
            <h6 class="card-title"><i class="bi bi-cart-check me-1"></i> Total Transaksi</h6>
            <p class="card-text fs-4"><?= esc($totalTransaksi) ?></p>
            <i class="bi bi-cart-check position-absolute end-0 bottom-0 opacity-25 pe-3 pb-2 display-1"></i>
        </div>
    </a>
</div>
</div>



<div class="row mb-4">

  <!-- 🔥 Top 5 Produk Terlaris -->
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h6 class="mb-0">🔥 Top 5 Produk Terlaris</h6>
        <form method="get" class="d-flex gap-2 align-items-center">
          <select name="bulan" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Semua Bulan</option>
            <?php foreach (range(1, 12) as $b): 
              $selected = $filter_bulan == $b ? 'selected' : '';
              echo "<option value='{$b}' {$selected}>".date('F', mktime(0, 0, 0, $b, 10))."</option>";
            endforeach ?>
          </select>
        </form>
      </div>
      <div class="card-body">
        <canvas id="topProductChart" height="200"></canvas>
      </div>
    </div>
  </div>

  <!-- 📈 Penjualan per Bulan -->
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h6 class="mb-0">📈 Penjualan per Bulan</h6>
        <form method="get" class="d-flex gap-2 align-items-center">
          <select name="tahun" class="form-select form-select-sm" onchange="this.form.submit()">
            <?php
              $yearNow = date('Y');
              for ($y = $yearNow; $y <= $yearNow + 5; $y++) {
                $selected = $filter_tahun == $y ? 'selected' : '';
                echo "<option value='{$y}' {$selected}>{$y}</option>";
              }
            ?>
          </select>
          <a href="<?= base_url('admin/dashboard') ?>" class="btn btn-sm btn-outline-secondary">Reset</a>
        </form>
      </div>
      <div class="card-body">
        <canvas id="penjualanBulananChart" height="200"></canvas>
      </div>
    </div>
  
            <div class="card-body">
                <?php if (!empty($topProducts)): ?>
                    <canvas id="topProductChart" height="100"></canvas>
                <?php else: ?>
                    <p class="text-muted">Belum ada data penjualan.</p>
                <?php endif; ?>
            </div>

</div>

<div class="row mt-4">
    <!-- Kolom Kiri -->
    <div class="col-md-6">
        <?php if (!empty($stokPerBarang)): ?>
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-light text-dark">
                    <h6 class="mb-0">📦 Stok per Barang (Top 10)</h6>
                </div>
                <div class="card-body">
                    <canvas id="stokBarangChart" height="100"></canvas>
                </div>
            </div>
        <?php endif; ?>

       <div class="card mt-4 shadow-sm border-0">
    <div class="card-header bg-light text-dark">
        <h6 class="mb-0">📦 Ringkasan Stok per Gudang</h6>
    </div>
    <div class="card-body">
        <?php if (!empty($gudangSummary)): ?>
            <canvas id="gudangStokChart" height="120"></canvas>
        <?php else: ?>
            <p class="text-muted">Tidak ada data gudang tersedia.</p>
        <?php endif; ?>
    </div>
</div> 
    </div>

    <!-- Kolom Kanan -->
    <div class="col-md-6">
        <?php if (!empty($produkPerKategori)): ?>
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light text-dark">
                    <h6 class="mb-0">📊 Produk per Kategori</h6>
                </div>
                <div class="card-body">
                    <canvas id="kategoriPieChart" height="100"></canvas>
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>
</div>




<?php if (!empty($topProducts) || !empty($produkPerKategori) || !empty($stokPerBarang)): ?>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    <?php if (!empty($topProducts)): ?>
const ctxTop = document.getElementById('topProductChart').getContext('2d');
const topProductChart = new Chart(ctxTop, {
    type: 'bar',
    data: {
        labels: <?= json_encode(array_column($topProducts, 'nama_produk')) ?>,
        datasets: [{
            label: 'Jumlah Terjual',
            data: <?= json_encode(array_map('intval', array_column($topProducts, 'total_terjual'))) ?>,
            backgroundColor: [
                '#f67280', '#36a2eb', '#fcd36d', '#8e44ad', '#1abc9c',
                '#2ecc71', '#3498db', '#e67e22', '#e74c3c', '#9b59b6'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        animation: {
            duration: 1500,
            easing: 'easeOutBounce'
        },
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return ' ' + context.raw + ' terjual';
                    }
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { stepSize: 1, precision: 0 }
            }
        }
    }
});
<?php endif; ?>



    <?php if (!empty($produkPerKategori)): ?>
const ctxPie = document.getElementById('kategoriPieChart').getContext('2d');
const kategoriPieChart = new Chart(ctxPie, {
    type: 'doughnut',
    data: {
        labels: <?= json_encode(array_column($produkPerKategori, 'kategori')) ?>,
        datasets: [{
            data: <?= json_encode(array_column($produkPerKategori, 'jumlah')) ?>,
            backgroundColor: [
                '#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff',
                '#ff9f40', '#e74c3c', '#2ecc71', '#3498db', '#9b59b6'
            ],
            borderWidth: 2,
            borderColor: '#fff',
            hoverOffset: 10
        }]
    },
    options: {
        cutout: '70%', // lubang tengah lebih besar
        responsive: true,
        plugins: {
            legend: {
                position: 'right',
                labels: {
                    boxWidth: 14,
                    padding: 15,
                    font: {
                        size: 13
                    }
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let label = context.label || '';
                        let value = context.parsed;
                        return `${label}: ${value} item`;
                    }
                }
            }
        }
    }
});
<?php endif; ?>


    <?php if (!empty($stokPerBarang)): ?>
const ctxStok = document.getElementById('stokBarangChart').getContext('2d');
const stokBarangChart = new Chart(ctxStok, {
    type: 'bar',
    data: {
        labels: <?= json_encode(array_column($stokPerBarang, 'nama')) ?>,
        datasets: [{
            label: 'Stok',
            data: <?= json_encode(array_column($stokPerBarang, 'stok')) ?>,
            backgroundColor: '#6c5ce7',
            borderWidth: 1
        }]
    },
    options: {
        animation: {
            duration: 1500,
            easing: 'easeOutBounce'
        },
        plugins: {
            legend: { display: false }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { precision: 0 }
            }
        }
    }
});
<?php endif; ?>
<?php if (!empty($gudangSummary)): ?>
const ctxGudang = document.getElementById('gudangStokChart').getContext('2d');
const gudangStokChart = new Chart(ctxGudang, {
    type: 'bar',
    data: {
        labels: <?= json_encode(array_column($gudangSummary, 'gudang_nama')) ?>,
        datasets: [{
            label: 'Total Stok',
            data: <?= json_encode(array_column($gudangSummary, 'total_stok')) ?>,
            backgroundColor: '#00b894',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        animation: {
            duration: 1500,
            easing: 'easeOutBounce'
        },
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return `${context.label}: ${context.raw} stok`;
                    }
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    precision: 0
                }
            }
        }
    }
});
const bulanPenjualan = <?= json_encode(array_map(fn($d) => date('F', mktime(0, 0, 0, $d['bulan'], 10)), $penjualanBulanan)) ?>;
const totalPenjualan = <?= json_encode(array_column($penjualanBulanan, 'total')) ?>;
const qtyPenjualan = <?= json_encode(array_column($penjualanBulanan, 'qty')) ?>;

const ctxPenjualan = document.getElementById('penjualanBulananChart').getContext('2d');
new Chart(ctxPenjualan, {
    type: 'bar',
    data: {
        labels: bulanPenjualan,
        datasets: [
            {
                label: 'Total Penjualan (Rp)',
                data: totalPenjualan,
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: 'rgba(54, 162, 235, 1)',
                yAxisID: 'y',
            },
            {
                label: 'Jumlah Terjual (Qty)',
                data: qtyPenjualan,
                backgroundColor: 'rgba(255, 159, 64, 0.6)',
                borderColor: 'rgba(255, 159, 64, 1)',
                yAxisID: 'y1',
            }
        ]
    },
    options: {
        responsive: true,
        interaction: {
            mode: 'index',
            intersect: false
        },
        animation: {
            duration: 1500,
            easing: 'easeOutBounce'
        },
        scales: {
            y: {
                beginAtZero: true,
                position: 'left',
                title: {
                    display: true,
                    text: 'Total Penjualan (Rp)'
                }
            },
            y1: {
                beginAtZero: true,
                position: 'right',
                grid: {
                    drawOnChartArea: false
                },
                title: {
                    display: true,
                    text: 'Jumlah Terjual (Qty)'
                }
            }
        }
    }
});
<?php endif; ?>
</script>
<?php endif; ?>


<!-- Bootstrap Icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<?= $this->endSection() ?>

