{% extends 'admin/custom_master.html' %}

{% block body %}
<!-- Baris Kartu Statistik -->
<div class="row">
    <div class="col-lg-4 col-md-6">
        <div class="card stat-card">
            <div class="card-body">
                <div class="stat-icon" style="background-color: var(--brand-green);">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <div>
                    <h3 class="stat-value">Rp {{ "{:,.0f}".format(stats.total_revenue).replace(',', '.') }}</h3>
                    <p class="stat-label mb-0">Total Pendapatan</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="card stat-card">
            <div class="card-body">
                <div class="stat-icon" style="background-color: var(--brand-yellow);">
                    <i class="fas fa-box-open"></i>
                </div>
                <div>
                    <h3 class="stat-value">{{ stats.total_products }}</h3>
                    <p class="stat-label mb-0">Total Produk</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="card stat-card">
            <div class="card-body">
                <div class="stat-icon" style="background-color: var(--brand-brown);">
                    <i class="fas fa-calendar-day"></i>
                </div>
                <div>
                    <h3 class="stat-value">{{ stats.today_sales }}</h3>
                    <p class="stat-label mb-0">Transaksi Hari Ini</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Baris Grafik Penjualan -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-white border-0">
                <h5 class="card-title font-weight-bold mb-0">Grafik Penjualan (7 Hari Terakhir)</h5>
            </div>
            <div class="card-body" style="height: 350px;">
                <canvas id="salesChart"></canvas>
            </div>
        </div>
    </div>
</div>

{% endblock body %}

{% block tail %}
    {{ super() }}
    <!-- Memuat library Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const labels = {{ chart_labels|tojson }};
            const data = {{ chart_data|tojson }};
            const ctx = document.getElementById('salesChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Total Penjualan (Rp)', data: data, fill: true,
                        backgroundColor: 'rgba(46, 87, 43, 0.1)', borderColor: '#2E572B',
                        tension: 0.3, pointBackgroundColor: '#2E572B', pointBorderColor: '#fff',
                        pointHoverRadius: 7, pointHoverBackgroundColor: '#2E572B',
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    scales: { y: { beginAtZero: true, ticks: { callback: (v) => 'Rp ' + new Intl.NumberFormat('id-ID').format(v) }}},
                    plugins: { legend: { display: false }, tooltip: { callbacks: { label: (c) => 'Rp ' + new Intl.NumberFormat('id-ID').format(c.parsed.y) }}}
                }
            });
        });
    </script>
{% endblock tail %}