@extends('layouts.admin')

@section('title', 'Dashboard Toko')

@section('content')
<div class="container-fluid px-0">

    <!-- Header Greeting Banner with Pink-Blue Gradient -->
    <div class="p-4 p-md-5 mb-4 text-white rounded-4 shadow-sm position-relative overflow-hidden" 
         style="background: linear-gradient(135deg, #F4A6C1 0%, #6CA6E8 100%);">
        <div class="position-absolute end-0 top-0 bottom-0 opacity-10 d-none d-lg-flex align-items-center pe-4 pointer-events-none">
            <i class="bi bi-bag-heart-fill" style="font-size: 15rem; color: #fff;"></i>
        </div>
        <div class="position-relative z-1">
            <span class="badge bg-white text-dark mb-2 px-3 py-1.5 rounded-pill shadow-sm" style="font-size: 12px;">
                <i class="bi bi-stars text-shazka-pink me-1"></i> Panel Pengelola ShazkaBags
            </span>
            <h2 class="display-6 fw-extrabold mb-1 tracking-tight">Selamat Datang, Admin!</h2>
            <p class="fs-6 mb-3 opacity-90 max-w-xl" style="max-width: 650px; line-height: 1.5;">
                Kelola penjualan tas online, pantau status pesanan pelanggan, dan analisa performa bisnis ShazkaBags dengan tampilan modern pink-biru yang elegan.
            </p>
            <div class="d-flex flex-wrap gap-2 pt-1">
                <a href="{{ route('admin.products.create') }}" class="btn btn-light fw-bold rounded-pill px-3.5 py-2 shadow-sm text-dark d-flex align-items-center gap-2">
                    <i class="bi bi-plus-circle-fill text-shazka-pink"></i> Tambah Produk Baru
                </a>
                <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-light rounded-pill px-3.5 py-2 fw-semibold d-flex align-items-center gap-2">
                    <i class="bi bi-receipt"></i> Lihat Pesanan ({{ $totalOrders ?? 0 }})
                </a>
                <a href="#laporan" class="btn btn-outline-light rounded-pill px-3.5 py-2 fw-semibold d-flex align-items-center gap-2">
                    <i class="bi bi-graph-up-arrow"></i> Lihat Laporan
                </a>
            </div>
        </div>
    </div>

    <!-- 2.C Kartu Statistik (4 Cards, Aksen Pink & Biru Bergantian) -->
    <div class="row g-3 mb-4">
        <!-- 1. Total Produk (Pink Accent) -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="stat-card pink h-100">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div>
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.72rem; letter-spacing: 0.05em;">Total Produk</span>
                        <h3 class="fw-extrabold mb-0 mt-1" style="color: #253047;">{{ $totalProducts ?? 0 }}</h3>
                    </div>
                    <div class="stat-icon pink shadow-sm">
                        <i class="bi bi-handbag"></i>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between pt-2 border-top border-light-subtle">
                    <span class="small text-muted" style="font-size: 12px;">Kategori aktif: <strong>{{ $totalCategories ?? 0 }}</strong></span>
                    <a href="{{ route('admin.products.index') }}" class="small fw-bold text-shazka-pink text-decoration-none">Kelola &rarr;</a>
                </div>
            </div>
        </div>

        <!-- 2. Total Pesanan (Blue Accent) -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="stat-card blue h-100">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div>
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.72rem; letter-spacing: 0.05em;">Total Pesanan</span>
                        <h3 class="fw-extrabold mb-0 mt-1" style="color: #253047;">{{ $totalOrders ?? 0 }}</h3>
                    </div>
                    <div class="stat-icon blue shadow-sm">
                        <i class="bi bi-cart-check"></i>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between pt-2 border-top border-light-subtle">
                    <span class="badge rounded-pill bg-shazka-blue-soft text-shazka-blue fw-semibold" style="font-size: 11px;">
                        Diproses: {{ $processingOrdersCount ?? 0 }}
                    </span>
                    <a href="{{ route('admin.orders.index') }}" class="small fw-bold text-shazka-blue text-decoration-none">Detail &rarr;</a>
                </div>
            </div>
        </div>

        <!-- 3. Total Pelanggan (Pink Accent) -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="stat-card pink h-100">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div>
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.72rem; letter-spacing: 0.05em;">Total Pelanggan</span>
                        <h3 class="fw-extrabold mb-0 mt-1" style="color: #253047;">{{ $totalBuyers ?? 0 }}</h3>
                    </div>
                    <div class="stat-icon pink shadow-sm">
                        <i class="bi bi-people"></i>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between pt-2 border-top border-light-subtle">
                    <span class="small text-muted" style="font-size: 12px;">Akun Pembeli Aktif</span>
                    <span class="badge bg-success-subtle text-success rounded-pill fw-semibold" style="font-size: 11px;">100% Terverifikasi</span>
                </div>
            </div>
        </div>

        <!-- 4. Total Pendapatan (Blue Accent) -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="stat-card blue h-100">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div>
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.72rem; letter-spacing: 0.05em;">Total Pendapatan</span>
                        <h4 class="fw-extrabold mb-0 mt-1 text-truncate" style="color: #253047;">Rp {{ number_format($totalRevenue ?? 0, 0, ',', '.') }}</h4>
                    </div>
                    <div class="stat-icon blue shadow-sm">
                        <i class="bi bi-wallet2"></i>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between pt-2 border-top border-light-subtle">
                    <span class="small text-muted" style="font-size: 12px;">Transaksi Berhasil</span>
                    <span class="badge bg-shazka-pink-soft text-shazka-pink rounded-pill fw-semibold" style="font-size: 11px;">Real Time</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions Bar -->
    <div class="card-modern p-3 mb-4 bg-white">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-2">
                <span class="badge rounded-pill bg-shazka-pink-soft text-shazka-pink px-3 py-1.5 fw-bold">
                    <i class="bi bi-lightning-charge-fill me-1"></i> Aksi Cepat
                </span>
                <span class="text-muted small">Pintasan praktis untuk operasional toko harian:</span>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ route('admin.products.create') }}" class="btn btn-shazka-pink btn-sm rounded-pill fw-semibold d-flex align-items-center gap-1.5 shadow-sm">
                    <i class="bi bi-plus-lg"></i> Tambah Produk
                </a>
                <a href="{{ route('admin.orders.index') }}" class="btn btn-shazka-blue btn-sm rounded-pill fw-semibold d-flex align-items-center gap-1.5 shadow-sm">
                    <i class="bi bi-receipt-cutoff"></i> Lihat Pesanan
                </a>
                <a href="{{ route('admin.categories.create') }}" class="btn btn-outline-shazka-pink btn-sm rounded-pill fw-semibold d-flex align-items-center gap-1.5">
                    <i class="bi bi-tag"></i> Tambah Kategori
                </a>
                <a href="#laporan" class="btn btn-outline-shazka-blue btn-sm rounded-pill fw-semibold d-flex align-items-center gap-1.5">
                    <i class="bi bi-file-earmark-bar-graph"></i> Lihat Laporan
                </a>
            </div>
        </div>
    </div>

    <!-- 2.D Grafik Penjualan & 2.F Produk Terlaris -->
    <div class="row g-4 mb-4" id="laporan">
        <!-- Grafik Penjualan -->
        <div class="col-12 col-xl-8">
            <div class="card-modern p-4 h-100 bg-white">
                <div class="d-flex flex-wrap align-items-center justify-content-between pb-3 mb-3 border-bottom gap-2">
                    <div>
                        <h5 class="fw-bold mb-1" style="color: #253047;">
                            <i class="bi bi-graph-up text-shazka-blue me-2"></i>Grafik Penjualan & Pendapatan
                        </h5>
                        <p class="text-muted small mb-0">Tren penjualan tas mingguan dan perbandingan nilai transaksi</p>
                    </div>
                    <!-- Filter Periode -->
                    <div class="btn-group btn-group-sm rounded-pill p-1 bg-light border" role="group">
                        <button type="button" class="btn btn-light rounded-pill fw-bold text-shazka-pink active shadow-none px-3" id="btnFilter7Days">7 Hari</button>
                        <button type="button" class="btn btn-light rounded-pill fw-semibold text-muted shadow-none px-3" id="btnFilterMonth">Bulan Ini</button>
                    </div>
                </div>

                <!-- Canvas Chart -->
                <div style="position: relative; height: 320px; width: 100%;">
                    <canvas id="salesChart"></canvas>
                </div>

                <div class="row g-3 pt-3 mt-1 border-top text-center">
                    <div class="col-4">
                        <div class="text-muted small">Total Pesanan Periode</div>
                        <div class="fw-bold fs-6 text-shazka-blue">{{ array_sum($chartOrderCounts ?? []) }} Transaksi</div>
                    </div>
                    <div class="col-4">
                        <div class="text-muted small">Total Omset Periode</div>
                        <div class="fw-bold fs-6 text-shazka-pink">Rp {{ number_format(array_sum($chartRevenues ?? []), 0, ',', '.') }}</div>
                    </div>
                    <div class="col-4">
                        <div class="text-muted small">Rata-rata Order</div>
                        <div class="fw-bold fs-6 text-dark">
                            Rp {{ count(array_filter($chartOrderCounts ?? [])) > 0 ? number_format(array_sum($chartRevenues ?? []) / max(1, array_sum($chartOrderCounts ?? [])), 0, ',', '.') : '0' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2.F Produk Terlaris -->
        <div class="col-12 col-xl-4">
            <div class="card-modern p-4 h-100 bg-white">
                <div class="d-flex align-items-center justify-content-between pb-3 mb-3 border-bottom">
                    <div>
                        <h5 class="fw-bold mb-1" style="color: #253047;">
                            <i class="bi bi-trophy-fill text-shazka-pink me-2"></i>Produk Terlaris
                        </h5>
                        <p class="text-muted small mb-0">Koleksi tas paling diminati pelanggan</p>
                    </div>
                    <a href="{{ route('admin.products.index') }}" class="small fw-semibold text-shazka-blue text-decoration-none">Lihat Semua</a>
                </div>

                <div class="d-flex flex-column gap-3">
                    @forelse ($bestSellingProducts as $index => $prod)
                        <div class="d-flex align-items-center gap-3 p-2.5 rounded-3 border border-light-subtle hover-bg-light transition" style="background: #FAFBFE;">
                            <div class="position-relative">
                                @if ($prod->image && file_exists(public_path('storage/' . $prod->image)))
                                    <img src="{{ asset('storage/' . $prod->image) }}" alt="{{ $prod->name }}" class="rounded-3" style="width: 54px; height: 54px; object-fit: cover;">
                                @else
                                    <div class="rounded-3 d-flex align-items-center justify-content-center" style="width: 54px; height: 54px; background: linear-gradient(135deg, #FFF0F5 0%, #EAF4FF 100%);">
                                        <i class="bi bi-handbag text-shazka-pink fs-4"></i>
                                    </div>
                                @endif
                                <span class="position-absolute top-0 start-0 translate-middle badge rounded-pill {{ $index == 0 ? 'bg-warning text-dark' : 'bg-shazka-pink text-white' }}" style="font-size: 10px;">
                                    #{{ $index + 1 }}
                                </span>
                            </div>
                            <div class="flex-grow-1 min-w-0">
                                <h6 class="mb-0 text-truncate fw-bold small text-dark" title="{{ $prod->name }}">{{ $prod->name }}</h6>
                                <div class="text-shazka-pink fw-bold small">Rp {{ number_format($prod->price, 0, ',', '.') }}</div>
                                <div class="d-flex align-items-center gap-2 mt-1">
                                    <span class="badge bg-shazka-blue-soft text-shazka-blue rounded-pill" style="font-size: 10px;">
                                        Terjual: {{ $prod->sold_count ?? 0 }} pcs
                                    </span>
                                    <span class="text-muted" style="font-size: 11px;">Sisa stok: {{ $prod->stock }}</span>
                                </div>
                            </div>
                            <a href="{{ route('admin.products.edit', $prod->id) }}" class="btn btn-sm btn-light border rounded-circle" style="width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;" title="Edit Produk">
                                <i class="bi bi-pencil-fill text-muted" style="font-size: 11px;"></i>
                            </a>
                        </div>
                    @empty
                        <div class="text-center py-4 text-muted small">
                            <i class="bi bi-box2 display-6 d-block mb-2 text-shazka-pink opacity-50"></i>
                            Belum ada riwayat penjualan produk tas.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- 2.E Pesanan Terbaru -->
    <div class="card-modern p-4 mb-4 bg-white" id="pesanan">
        <div class="d-flex flex-wrap align-items-center justify-content-between pb-3 mb-3 border-bottom gap-2">
            <div>
                <h5 class="fw-bold mb-1" style="color: #253047;">
                    <i class="bi bi-bag-check-fill text-shazka-pink me-2"></i>Pesanan Terbaru
                </h5>
                <p class="text-muted small mb-0">Daftar transaksi terbaru dari pembeli di ShazkaBags</p>
            </div>
            <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-shazka-blue btn-sm rounded-pill fw-semibold px-3">
                Lihat Semua Pesanan ({{ $totalOrders ?? 0 }}) &rarr;
            </a>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-uppercase text-muted" style="font-size: 0.75rem; letter-spacing: 0.05em;">
                    <tr>
                        <th class="py-3 px-3">ID Pesanan</th>
                        <th class="py-3 px-3">Nama Pembeli</th>
                        <th class="py-3 px-3">Tanggal Pesanan</th>
                        <th class="py-3 px-3">Total Pembayaran</th>
                        <th class="py-3 px-3">Status Pesanan</th>
                        <th class="py-3 px-3 text-center">Aksi Detail</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-light">
                    @forelse ($recentOrders as $order)
                        <tr>
                            <!-- ID Pesanan -->
                            <td class="py-3 px-3">
                                <span class="fw-bold text-dark font-monospace" style="font-size: 0.85rem;">#{{ $order->order_number }}</span>
                                <div class="text-muted" style="font-size: 11px;">{{ $order->orderItems->count() }} item barang</div>
                            </td>

                            <!-- Nama Pembeli -->
                            <td class="py-3 px-3">
                                <div class="d-flex align-items-center gap-2">
                                    <div class="rounded-circle d-flex align-items-center justify-content-center text-shazka-blue fw-bold" style="width: 34px; height: 34px; background: #EAF4FF; font-size: 12px;">
                                        {{ strtoupper(substr($order->user->name ?? 'P', 0, 1)) }}
                                    </div>
                                    <div>
                                        <div class="fw-bold small text-dark">{{ $order->user->name ?? 'Pembeli' }}</div>
                                        <div class="text-muted" style="font-size: 11px;">{{ $order->user->email ?? '-' }}</div>
                                    </div>
                                </div>
                            </td>

                            <!-- Tanggal Pesanan -->
                            <td class="py-3 px-3 text-muted small">
                                <div><i class="bi bi-clock me-1 text-shazka-blue"></i> {{ $order->created_at->format('d M Y') }}</div>
                                <div style="font-size: 11px;">{{ $order->created_at->format('H:i') }} WIB</div>
                            </td>

                            <!-- Total Pembayaran -->
                            <td class="py-3 px-3">
                                <div class="fw-bold text-shazka-pink">{{ $order->formatted_total ?? ('Rp ' . number_format($order->total, 0, ',', '.')) }}</div>
                                <div class="text-muted" style="font-size: 11px;">Metode: {{ $order->payment_method ?? 'Transfer' }}</div>
                            </td>

                            <!-- Status Pesanan (Badge Berwarna) -->
                            <td class="py-3 px-3">
                                @if ($order->status === 'pending')
                                    <span class="badge-order-pending small">
                                        <i class="bi bi-hourglass-split"></i> Menunggu Pembayaran
                                    </span>
                                @elseif ($order->status === 'processing')
                                    <span class="badge-order-processing small">
                                        <i class="bi bi-arrow-repeat"></i> Sedang Diproses
                                    </span>
                                @elseif ($order->status === 'shipped')
                                    <span class="badge-order-shipped small">
                                        <i class="bi bi-truck"></i> Sedang Dikirim
                                    </span>
                                @elseif ($order->status === 'completed')
                                    <span class="badge-order-completed small">
                                        <i class="bi bi-check-circle-fill"></i> Selesai
                                    </span>
                                @elseif ($order->status === 'cancelled')
                                    <span class="badge-order-cancelled small">
                                        <i class="bi bi-x-circle-fill"></i> Dibatalkan
                                    </span>
                                @else
                                    <span class="badge bg-secondary rounded-pill small">{{ ucfirst($order->status) }}</span>
                                @endif
                            </td>

                            <!-- Aksi Detail -->
                            <td class="py-3 px-3 text-center">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-outline-shazka-pink btn-sm rounded-pill fw-semibold px-3 py-1 d-inline-flex align-items-center gap-1 shadow-sm">
                                    <i class="bi bi-eye"></i> Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox display-6 text-shazka-blue opacity-50 d-block mb-2"></i>
                                Belum ada pesanan terbaru dari pembeli.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Section Data Pelanggan & Pengaturan Toko -->
    <div class="row g-4" id="pengaturan">
        <!-- Manajemen Pelanggan -->
        <div class="col-12 col-lg-6" id="pelanggan">
            <div class="card-modern p-4 h-100 bg-white">
                <div class="d-flex align-items-center justify-content-between pb-3 mb-3 border-bottom">
                    <div>
                        <h6 class="fw-bold mb-1" style="color: #253047;">
                            <i class="bi bi-person-check-fill text-shazka-blue me-2"></i>Informasi Pelanggan
                        </h6>
                        <p class="text-muted small mb-0">Ringkasan akun pembeli aktif di toko</p>
                    </div>
                    <span class="badge bg-shazka-blue-soft text-shazka-blue rounded-pill fw-bold px-3 py-1.5">
                        {{ $totalBuyers ?? 0 }} Pembeli Terdaftar
                    </span>
                </div>
                <p class="small text-muted" style="line-height: 1.6;">
                    Seluruh akun pembeli terdaftar memiliki akses ke fitur keranjang, checkout instan, pengisian alamat ganda, pelacakan riwayat pesanan, serta manajemen profil mandiri.
                </p>
                <div class="p-3 rounded-3" style="background: linear-gradient(135deg, #FFF0F5 0%, #EAF4FF 100%);">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="fw-bold small text-dark d-block">Hak Akses Pembeli</span>
                            <span class="text-muted" style="font-size: 11px;">Role Buyer terproteksi Middleware</span>
                        </div>
                        <span class="badge bg-white text-dark shadow-sm rounded-pill px-3 py-1.5 fw-bold">role: buyer</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Profil Admin & Info Toko -->
        <div class="col-12 col-lg-6" id="profil">
            <div class="card-modern p-4 h-100 bg-white">
                <div class="d-flex align-items-center justify-content-between pb-3 mb-3 border-bottom">
                    <div>
                        <h6 class="fw-bold mb-1" style="color: #253047;">
                            <i class="bi bi-shield-check text-shazka-pink me-2"></i>Status Toko ShazkaBags
                        </h6>
                        <p class="text-muted small mb-0">Informasi konfigurasi dan profil administrator</p>
                    </div>
                    <span class="badge bg-success-subtle text-success rounded-pill fw-bold px-3 py-1.5">
                        <i class="bi bi-circle-fill me-1" style="font-size: 8px;"></i> Online
                    </span>
                </div>
                <div class="d-flex align-items-center gap-3 mb-3">
                    <img src="{{ asset('logo/logo.png') }}" alt="Admin Avatar" class="admin-avatar" style="width: 52px; height: 52px;">
                    <div>
                        <h6 class="mb-0 fw-bold text-dark">{{ $userName ?? auth()->user()->name ?? 'Admin ShazkaBags' }}</h6>
                        <div class="text-muted small">{{ $userEmail ?? auth()->user()->email ?? 'admin@gmail.com' }}</div>
                        <span class="badge bg-shazka-pink-soft text-shazka-pink rounded-pill mt-1" style="font-size: 10px;">Super Administrator</span>
                    </div>
                </div>
                <div class="pt-2 border-top border-light-subtle d-flex justify-content-between align-items-center small text-muted">
                    <span>Versi Desain: Pink & Blue Modern v2.0</span>
                    <a href="{{ route('toko') }}" target="_blank" class="fw-bold text-shazka-blue text-decoration-none">
                        Buka Toko <i class="bi bi-box-arrow-up-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const ctx = document.getElementById('salesChart');
        if (!ctx) return;

        const labels = {!! json_encode($chartLabels ?? ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']) !!};
        const orderCounts = {!! json_encode($chartOrderCounts ?? [0, 0, 0, 0, 0, 0, 0]) !!};
        const revenues = {!! json_encode($chartRevenues ?? [0, 0, 0, 0, 0, 0, 0]) !!};

        const chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Pendapatan (Rp)',
                        data: revenues,
                        backgroundColor: 'rgba(244, 166, 193, 0.75)',
                        borderColor: '#F4A6C1',
                        borderWidth: 2,
                        borderRadius: 8,
                        yAxisID: 'yRevenue',
                        order: 2
                    },
                    {
                        label: 'Jumlah Pesanan',
                        data: orderCounts,
                        type: 'line',
                        borderColor: '#6CA6E8',
                        backgroundColor: '#6CA6E8',
                        borderWidth: 3,
                        pointBackgroundColor: '#FFFFFF',
                        pointBorderColor: '#6CA6E8',
                        pointBorderWidth: 2,
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        tension: 0.35,
                        yAxisID: 'yOrders',
                        order: 1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            font: { family: 'Plus Jakarta Sans', size: 12, weight: '600' },
                            color: '#253047',
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(37, 48, 71, 0.95)',
                        titleFont: { family: 'Plus Jakarta Sans', size: 13, weight: '700' },
                        bodyFont: { family: 'Plus Jakarta Sans', size: 12 },
                        padding: 12,
                        cornerRadius: 12,
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) label += ': ';
                                if (context.dataset.yAxisID === 'yRevenue') {
                                    label += 'Rp ' + Number(context.raw).toLocaleString('id-ID');
                                } else {
                                    label += context.raw + ' pesanan';
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: {
                            font: { family: 'Plus Jakarta Sans', size: 11, weight: '600' },
                            color: '#64748b'
                        }
                    },
                    yRevenue: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        grid: { color: 'rgba(244, 166, 193, 0.15)' },
                        ticks: {
                            font: { family: 'Plus Jakarta Sans', size: 11 },
                            color: '#F4A6C1',
                            callback: function(value) {
                                if (value >= 1000000) return 'Rp ' + (value / 1000000) + 'jt';
                                if (value >= 1000) return 'Rp ' + (value / 1000) + 'rb';
                                return 'Rp ' + value;
                            }
                        }
                    },
                    yOrders: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        grid: { drawOnChartArea: false },
                        ticks: {
                            font: { family: 'Plus Jakarta Sans', size: 11 },
                            color: '#6CA6E8',
                            precision: 0
                        }
                    }
                }
            }
        });

        // Toggle filter buttons aesthetic
        const btn7 = document.getElementById('btnFilter7Days');
        const btnMonth = document.getElementById('btnFilterMonth');
        if (btn7 && btnMonth) {
            btn7.addEventListener('click', function () {
                btn7.classList.add('fw-bold', 'text-shazka-pink', 'active');
                btn7.classList.remove('text-muted');
                btnMonth.classList.remove('fw-bold', 'text-shazka-pink', 'active');
                btnMonth.classList.add('text-muted');
            });
            btnMonth.addEventListener('click', function () {
                btnMonth.classList.add('fw-bold', 'text-shazka-pink', 'active');
                btnMonth.classList.remove('text-muted');
                btn7.classList.remove('fw-bold', 'text-shazka-pink', 'active');
                btn7.classList.add('text-muted');
            });
        }
    });
</script>
@endpush