<div class="flex flex-col lg:flex-row bg-purple-50 max-w-full">
    <!-- Main Content -->
    <main id="main-content" class="flex-1 p-4 md:p-6 transition-all bg-purple-50 duration-300">
        <h1 class="text-md md:text-xl font-semibold mb-2 text-[#333]">Penting buat diliat hari ini</h1>
        <span class="text-sm md:text-md text-gray-500 mb-4 block">Aktivitas yang perlu kamu pantau untuk hidup sejahtera.</span>
        <?php
        // Define all cards and their configurations
        $allCards = [
            'pesanan_baru' => [
                'bg' => 'indigo',
                'title' => 'Pesanan Baru',
                'info' => 'Pesanan Website Yang Baru Masuk.',
                'icon' => 'shopping-cart',
                'data' => $incoming_orders,
                'link' => base_url('admin/orders/manage-order?tab=pending')
            ],
            'pesanan_retailer' => [
                'bg' => 'green',
                'title' => 'Pesanan Retailer',
                'info' => 'Jumlah Pesanan Retailer Yang Baru Masuk.',
                'icon' => 'users',
                'data' => $incoming_retailer_orders,
                'link' => base_url('admin/orders/manage-retailer-order')
            ],
            'siap_dikirim' => [
                'bg' => 'blue',
                'title' => 'Siap Dikirim',
                'info' => 'Pesanan yang siap dikirim.',
                'icon' => 'package',
                'data' => $processing_orders,
                'link' => base_url('admin/orders/manage-order?tab=processing')
            ],
            'lagi_dikirim' => [
                'bg' => 'blue',
                'title' => 'Lagi Dikirim',
                'info' => 'Pesanan yang lagi dikirim.',
                'icon' => 'package',
                'data' => $shipped_orders,
                'link' => base_url('admin/orders/manage-order?tab=processing')
            ],
            'perlu_konfirmasi' => [
                'bg' => 'amber',
                'title' => 'Perlu Konfirmasi',
                'info' => 'Jumlah Pesanan Yang Perlu Dikonfirmasi.',
                'icon' => 'alert-circle',
                'data' => $need_to_confirm_orders,
                'link' => base_url('admin/orders/manage-order?tab=pending')
            ],
            'website_traffic' => [
                'bg' => 'indigo',
                'title' => 'Website Traffic',
                'info' => 'Jumlah pengunjung website hari ini.',
                'icon' => 'bar-chart-2',
                'data' => $today_traffic,
                'link' => null
            ],
            'conversion_rate' => [
                'bg' => 'green',
                'title' => 'Conversion Rate',
                'info' => 'Persentase pengunjung yang berubah menjadi pembeli.',
                'icon' => 'refresh-cw',
                'data' => $conversion_rate,
                'link' => null
            ],
            'produk_terlaris' => [
                'bg' => 'blue',
                'title' => 'Produk Terlaris',
                'info' => 'Produk dengan penjualan tertinggi berdasarkan data terbaru.',
                'icon' => 'award',
                'data' => isset($best_selling->title) ? htmlspecialchars($best_selling->title) : 'Tidak Ada Data',
                'is_product' => true,
                'link' => null
            ],
            'marketing_expenses' => [
                'bg' => 'indigo',
                'title' => 'Pengeluaran Produk',
                'info' => 'Jumlah pengeluaran dari produk yang dikirimkan.',
                'icon' => 'bar-chart-2',
                'data' => $marketing_expenses,
                'link' => base_url('admin/marketing/promotion-product')
            ],
        ];

        // Define which cards are visible to each role
        $roleCards = [
            'super_admin' => [
                'pesanan_baru',
                'pesanan_retailer',
                'siap_dikirim',
                'lagi_dikirim',
                'perlu_konfirmasi',
                'website_traffic',
                'conversion_rate',
                'produk_terlaris',
                'marketing_expenses'
            ], // All cards
            'gsa' => ['pesanan_baru', 'pesanan_retailer', 'siap_dikirim', 'lagi_dikirim', 'perlu_konfirmasi'],
            'marketing' => ['website_traffic', 'conversion_rate', 'produk_terlaris', 'marketing_expenses'],
            'gudang' => ['pesanan_baru', 'siap_dikirim', 'lagi_dikirim'],
            'finance' => ['pesanan_baru', 'lagi_dikirim',  'produk_terlaris']
        ];

        // Get cards for current role (if super_admin, show all cards)
        $cardsToShow = ($role === 'super_admin') ? $roleCards['super_admin'] : (isset($roleCards[$role]) ? $roleCards[$role] : []);
        ?>

        <?php if (!empty($cardsToShow)): ?>
            <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
                <?php foreach ($cardsToShow as $cardKey): ?>
                    <?php if (isset($allCards[$cardKey])): ?>
                        <?php $card = $allCards[$cardKey]; ?>
                        <div class="bg-white rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl hover:translate-y-px overflow-visible">
                            <div class="bg-<?= $card['bg'] ?>-100 p-2 md:p-3">
                                <div class="flex justify-between items-center">
                                    <h3 class="text-xs md:text-md font-medium text-<?= $card['bg'] ?>-800"><?= $card['title'] ?></h3>
                                    <div class="relative group">
                                        <i data-feather="info" class="text-<?= $card['bg'] ?>-500 w-3 h-3 md:w-5 md:h-5"></i>
                                        <div class="absolute z-10 hidden group-hover:block bg-gray-800 text-white text-sm rounded p-2 w-48 right-0 -mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 overflow-visible">
                                            <?= $card['info'] ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p-3 md:p-4">
                                <div class="flex items-center">
                                    <div class="mr-4 bg-<?= $card['bg'] ?>-500 text-white p-3 rounded-full">
                                        <i data-feather="<?= $card['icon'] ?>" class="w-6 h-6"></i>
                                    </div>
                                    <div>
                                        <?php if (isset($card['is_product']) && $card['is_product']): ?>
                                            <?= $card['data'] ?>
                                        <?php else: ?>
                                            <span class="text-gray-500 text-xs md:text-sm">Total</span>
                                            <div class="text-xl md:text-3xl font-bold"><?= $card['data'] ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <?php if ($card['link']): ?>
                                    <a href="<?= $card['link'] ?>" class="mt-4 block text-center text-<?= $card['bg'] ?>-600 hover:text-<?= $card['bg'] ?>-800 text-xs md:text-sm font-medium">
                                        Lihat Semua <i data-feather="arrow-right" class="inline w-4 h-4"></i>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
        <!-- Navigasi -->
        <div class="mt-6 bg-white p-4 rounded-lg shadow-lg">
            <h1 class="text-md md:text-xl font-semibold mb-4 text-[#333]">Navigasi Menu</h1>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                <!-- Pesanan -->
                <a href="<?= base_url('admin/orders/manage-order') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="shopping-cart" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Pesanan</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Daftar & Tambah Pesanan</p>
                    </div>
                </a>

                <!-- Produk -->
                <a href="<?= base_url('admin/products/manage-product') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="package" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Produk</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Kelola Produk & Varian</p>
                    </div>
                </a>

                <!-- Pelanggan -->
                <a href="<?= base_url('admin/customers/manage') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="users" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Pelanggan</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Daftar Pelanggan</p>
                    </div>
                </a>

                <!-- Retailer -->
                <a href="<?= base_url('admin/resellers/manage') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="briefcase" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Retailer</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Kelola Retailer</p>
                    </div>
                </a>

                <!-- Kategori -->
                <a href="<?= base_url('admin/products/manage-category') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="grid" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Kategori</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Daftar Kategori</p>
                    </div>
                </a>

                <!-- Merk -->
                <a href="<?= base_url('admin/products/manage-brand') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="list" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Merk</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Daftar Merk</p>
                    </div>
                </a>

                <!-- Stok -->
                <a href="<?= base_url('admin/stocks/stock-product') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="archive" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Stok</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Manajemen Stok</p>
                    </div>
                </a>

                <!-- Layanan Pelanggan -->
                <a href="<?= base_url('admin/customer-services/review') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="heart" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Layanan Pelanggan</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Review, Wishlist & Klaim Garansi</p>
                    </div>
                </a>

                <!-- Marketing -->
                <a href="<?= base_url('admin/marketing/voucher') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="trending-up" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Marketing</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Voucher & Promosi</p>
                    </div>
                </a>

                <!-- Afiliasi -->
                <a href="<?= base_url('admin/affiliate/dashboard') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="dollar-sign" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Program Afiliasi</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Dashboard Afiliasi</p>
                    </div>
                </a>

                <!-- Statistik -->
                <a href="<?= base_url('admin/statistic/visits') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="bar-chart-2" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Statistik</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Statistik Kunjungan</p>
                    </div>
                </a>

                <!-- Pengaturan -->
                <a href="<?= base_url('admin/auth/logout') ?>" class="block p-4 bg-gray-50 rounded-lg hover:bg-purple-50 transition-colors duration-300 border border-transparent hover:border-[#7A4397] group">
                    <div class="flex flex-col items-center text-center">
                        <i data-feather="settings" class="w-6 h-6 mb-2 text-[#333] group-hover:text-[#7A4397] transition-colors duration-300"></i>
                        <h3 class="text-sm md:text-md font-semibold text-[#333] group-hover:text-[#7A4397]">Pengaturan</h3>
                        <p class="text-xs md:text-sm text-gray-500 mt-1">Logout</p>
                    </div>
                </a>
            </div>
        </div>
        <!-- Tabs Navigation -->
        <div class="mt-6 bg-white p-4 rounded-lg shadow-lg">
            <h1 class="text-md md:text-xl font-semibold mb-2 text-[#333]">Analisis Produk</h1>
            <span class="text-sm md:text-md text-gray-500 mb-4 block">Update terakhir: <?= date('d F Y') ?></span>
            <div class="border-b">
                <nav class="flex space-x-4">
                    <button data-tab="terlaris" class="py-2 px-2 md:py-3 md:px-3 text-sm md:text-md leading-none text-purple-500 border-b-2 border-l-0 border-purple-500 hover:border-purple-500 hover:text-purple-500 focus:border-purple-500 active">
                        Terlaris
                    </button>
                    <button data-tab="underselling" class="py-2 px-2 md:py-3 md:px-3 text-sm md:text-md leading-none text-gray-600 border-b-2 border-l-0 border-transparent hover:border-purple-500 hover:text-purple-500 focus:border-purple-500">
                        Nyaman di gudang
                    </button>
                    <button data-tab="stock" class="py-2 px-2 md:py-3 md:px-3 text-sm md:text-md leading-none text-gray-600 border-b-2 border-l-0 border-transparent hover:border-purple-500 hover:text-purple-500 focus:border-purple-500">
                        Stok perlu ditambah
                    </button>
                </nav>
            </div>

            <!-- Tab Content -->
            <div class="mt-4">
                <div id="terlaris-tab" class="block">
                    <div class="flex justify-center p-4">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500"></div>
                    </div>
                </div>
                <div id="underselling-tab" class="hidden">
                    <div class="flex justify-center p-4">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500"></div>
                    </div>
                </div>
                <div id="stock-tab" class="hidden">
                    <div class="flex justify-center p-4">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistik Toko -->
        <div class="mt-6 bg-white p-4 mb-6 rounded-lg shadow-lg">
            <div class="flex justify-between items-center mb-4">
                <div>
                    <h1 class="text-md md:text-xl font-semibold mb-2 text-[#333]">Statistik Toko</h1>
                    <span class="text-sm md:text-md text-gray-500 block">Update terakhir: <?= date('d F Y') ?></span>
                </div>
            </div>

            <div class="bg-gray-50 p-4 rounded-lg">
                <div class="flex justify-between items-center mb-2">
                    <h2 class="text-sm md:text-md font-medium text-gray-700">Perbandingan Pendapatan</h2>
                    <div class="flex items-center text-xs md:text-sm">
                        <span class="flex items-center mr-2 md:mr-4">
                            <span class="w-2 h-2 md:w-3 md:h-3 rounded-full bg-blue-500 mr-1"></span>
                            <span>Periode Sekarang</span>
                        </span>
                        <span class="flex items-center">
                            <span class="w-2 h-2 md:w-3 md:h-3 rounded-full bg-gray-300 mr-1"></span>
                            <span>Periode Tahun Lalu</span>
                        </span>
                    </div>
                </div>
                <div class="relative" style="height: 300px;">
                    <canvas id="revenueChart"></canvas>
                </div>
                <?php
                if ($last_year_week_revenue > 0) {
                    $percentage_change = (($current_week_revenue - $last_year_week_revenue) / $last_year_week_revenue) * 100;
                    $formatted_percentage = number_format(abs($percentage_change), 2, ',', '.');
                } else {
                    $formatted_percentage = '100';
                }

                $icon = $last_year_week_revenue > 0 ? ($percentage_change >= 0 ? 'arrow-up' : 'arrow-down') : 'arrow-up';
                $text_color = $last_year_week_revenue > 0 ? ($percentage_change >= 0 ? 'text-green-500' : 'text-red-500') : 'text-green-500';
                ?>
                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-white p-4 rounded-lg shadow border-l-4 border-gray-400">
                        <span class="text-xs md:text-sm text-gray-500">Total Pendapatan Minggu Yang Sama Tahun Lalu</span>
                        <div class="flex items-center mt-1">
                            <h3 class="text-xl md:text-2xl font-bold" id="previous-total">Rp <?= number_format($last_year_week_revenue, 0, ',', '.') ?></h3>
                        </div>
                    </div>

                    <div class="bg-white p-4 rounded-lg shadow border-l-4 border-blue-500">
                        <span class="text-xs md:text-sm text-gray-500">Total Pendapatan Minggu Ini</span>
                        <div class="flex items-center mt-1">
                            <h3 class="text-xl md:text-2xl font-bold" id="current-total">Rp <?= number_format($current_week_revenue, 0, ',', '.') ?></h3>
                            <span class="ml-2 text-sm font-medium <?= $text_color ?> flex items-center" id="current-percentage">
                                <i data-feather="<?= $icon ?>" class="md:w-4 md:h-4 w-3 h-3 mr-1"></i>
                                <?= $formatted_percentage ?>%
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <aside class="md:w-72 bg-white p-4 md:p-6 shadow-lg mt-2 lg:mt-0 rounded-lg md:rounded-none">
        <h2 class="text-lg font-semibold text-[#333]">Informasi</h2>
        <p class="text-sm text-[#333] mb-8">Statistik website hari ini.</p>

        <div class="space-y-2">
            <div class="flex justify-between text-sm text-[#333] border-b pb-2">
                <span>Total Kunjungan</span>
                <span class="font-semibold"><?= $today_traffic ?></span>
            </div>
            <div class="flex justify-between text-sm text-[#333] border-b pb-2">
                <span>Total Kunjungan Unik</span>
                <span class="font-semibold"><?= $today_unique_traffic ?></span>
            </div>
            <div class="flex justify-between text-sm text-[#333] border-b pb-2">
                <span>Total Penjualan</span>
                <span class="font-semibold">Rp. <?= number_format($today_revenue, 0, ',', '.') ?> </span>
            </div>
            <div class="flex justify-between text-sm text-[#333] border-b pb-2">
                <span>Pelanggan Baru</span>
                <span class="font-semibold"><?= $today_new_customer ?></span>
            </div>
        </div>
    </aside>
</div>
<!-- Load Chart.js dari CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

<script>
    const tabs = document.querySelectorAll('[data-tab]');
    const tabContents = {
        'terlaris': document.getElementById('terlaris-tab'),
        'underselling': document.getElementById('underselling-tab'),
        'stock': document.getElementById('stock-tab')
    };
    document.addEventListener('DOMContentLoaded', function() {
        // Pastikan Feather Icons sudah diinisialisasi
        if (typeof feather !== 'undefined') {
            feather.replace();
        }

        console.log(<?= $current_week_revenue ?>);

        // Animasi counter
        const counters = document.querySelectorAll('.text-3xl.font-bold');
        counters.forEach(counter => {
            const target = parseInt(counter.innerText.replace(/[^0-9]/g, '')); // Ambil hanya angka
            if (isNaN(target)) return; // Skip jika bukan angka

            let count = 0;
            const duration = 1000; // ms
            const frameDuration = 1000 / 30; // 30fps
            const increment = target / (duration / frameDuration);

            const timer = setInterval(() => {
                count += increment;
                counter.innerText = Math.floor(count);

                if (count >= target) {
                    counter.innerText = target;
                    clearInterval(timer);
                }
            }, frameDuration);
        });

        // Data pendapatan (contoh, nantinya ganti dengan data dari controller)
        const revenueData = {
            weekly: {
                labels: <?= json_encode($weekly_labels) ?>, // ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']
                currentPeriod: <?= json_encode($weekly_current_data) ?>,
                previousPeriod: <?= json_encode($weekly_previous_data) ?>,
            },
        };

        // Inisialisasi Chart
        const ctx = document.getElementById('revenueChart').getContext('2d');
        let revenueChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: revenueData.weekly.labels,
                datasets: [{
                        label: 'Periode Saat Ini',
                        data: revenueData.weekly.currentPeriod,
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        fill: true,
                        tension: 0.3,
                        borderWidth: 3,
                        pointBackgroundColor: '#3b82f6',
                        pointRadius: 4,
                        pointHoverRadius: 6
                    },
                    {
                        label: 'Periode Tahun Lalu',
                        data: revenueData.weekly.previousPeriod,
                        borderColor: '#9ca3af',
                        backgroundColor: 'rgba(156, 163, 175, 0.1)',
                        fill: true,
                        tension: 0.3,
                        borderWidth: 3,
                        pointBackgroundColor: '#9ca3af',
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        borderDash: [5, 5]
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                label += new Intl.NumberFormat('id-ID', {
                                    style: 'currency',
                                    currency: 'IDR',
                                    minimumFractionDigits: 0,
                                    maximumFractionDigits: 0
                                }).format(context.raw);
                                return label;
                            }
                        }
                    },
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return new Intl.NumberFormat('id-ID', {
                                    style: 'currency',
                                    currency: 'IDR',
                                    minimumFractionDigits: 0,
                                    maximumFractionDigits: 0
                                }).format(value);
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // Fungsi untuk menghitung persentase perubahan
        function calculatePercentageChange(current, previous) {
            if (previous === 0) return 0;
            return ((current - previous) / previous) * 100;
        }

        // Fungsi untuk memformat angka ke format mata uang
        function formatCurrency(amount) {
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(amount);
        }

        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // Update active tab
                tabs.forEach(t => {
                    t.classList.remove('active', 'border-purple-500', 'text-purple-500');
                    t.classList.add('border-transparent', 'text-gray-600');
                });
                this.classList.add('active', 'border-purple-500', 'text-purple-500');
                this.classList.remove('border-transparent', 'text-gray-600');

                // Show relevant content
                const tabName = this.getAttribute('data-tab');
                Object.keys(tabContents).forEach(key => {
                    if (key === tabName) {
                        tabContents[key].classList.remove('hidden');
                        tabContents[key].classList.add('block');
                    } else {
                        tabContents[key].classList.add('hidden');
                        tabContents[key].classList.remove('block');
                    }
                });

                // Fetch data for the selected tab
                fetchProductData(tabName);
            });
        });
        // Initial load - fetch terlaris data
        fetchProductData('terlaris');
    });

    function fetchProductData(tab) {
        // Show loading state
        tabContents[tab].innerHTML = '<div class="flex justify-center p-4"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500"></div></div>';

        // Fetch data from server
        fetch(`<?= base_url('admin/dashboard/get_product_analysis?tab=') ?>${tab}`)
            .then(response => response.json())
            .then(data => {
                renderProductList(data, tab);
            })
            .catch(error => {
                console.error('Error fetching product data:', error);
                tabContents[tab].innerHTML = '<div class="text-red-500 p-4">Terjadi kesalahan saat memuat data.</div>';
            });
    }

    function renderProductList(products, tab) {
        if (!products || products.length === 0) {
            tabContents[tab].innerHTML = '<div class="p-4 text-gray-500">Tidak ada data produk yang tersedia.</div>';
            return;
        }

        let tabTitle, tabDescription;

        switch (tab) {
            case 'terlaris':
                tabTitle = 'Produk Terlaris';
                tabDescription = 'Produk dengan penjualan tertinggi berdasarkan jumlah transaksi.';
                break;
            case 'underselling':
                tabTitle = 'Produk Nyaman di Gudang';
                tabDescription = 'Produk dengan penjualan terendah namun masih memiliki stok.';
                break;
            case 'stock':
                tabTitle = 'Stok Perlu Ditambah';
                tabDescription = 'Produk dengan stok rendah namun memiliki penjualan baik.';
                break;
        }

        let html = `
                <div class="mb-4">
                    <p class="text-sm md:text-md text-[333]">${tabDescription}</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            `;

        products.forEach(product => {
            const imageUrl = product.image ? `<?= base_url('uploads/product/') ?>${product.image}` : '<?= base_url('assets/img/no-image.png') ?>';
            const productUrl = `<?= base_url('product/') ?>${product.alias}`;

            html += `
                    <div class="bg-white border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <a href="${productUrl}" target="_blank" class="block">
                            <div class="h-40 bg-gray-100 overflow-hidden">
                                <img src="${imageUrl}" alt="${product.title}" class="w-full h-full object-cover">
                            </div>
                            <div class="p-3">
                                <div class="text-xs text-gray-500 mb-1">${product.brand_title || 'Tanpa Merk'}</div>
                                <h3 class="text-sm font-medium text-gray-900 mb-1 truncate" title="${product.title}">${product.title}</h3>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs px-2 py-1 rounded-full ${tab === 'terlaris' ? 'bg-green-100 text-green-800' : (tab === 'underselling' ? 'bg-blue-100 text-blue-800' : 'bg-red-100 text-red-800')}">
                                        ${tab === 'terlaris' ? 'Terjual: ' + product.total_sold : (tab === 'underselling' ? 'Terjual: ' + product.total_sold : 'Stok: ' + product.total_stock)}
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                `;
        });

        html += '</div>';
        tabContents[tab].innerHTML = html;
    }
</script>