<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Teratory SaaS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #E2E4E5; }
        /* KUNCI MUTLAK: Mengganti purple-box menjadi green-box dengan gradasi hijau elegan */
        .green-box { background: linear-gradient(135deg, #71A370 0%, #487547 100%); }
    </style>
</head>
<body class="min-h-screen text-gray-800 pb-24 relative">

    <div class="max-w-7xl mx-auto p-6">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            
            <div class="lg:col-span-4 flex flex-col gap-6">
                <h1 class="text-5xl font-extrabold text-[#5B8C5A] mb-2 tracking-tight">Dashboard</h1>

                <div class="flex gap-4">
                    <div class="green-box w-1/2 rounded-2xl p-4 text-white shadow-md flex flex-col justify-center">
                        <span class="text-xs opacity-80">Stok Menipis</span>
                        <span id="low-stock-count" class="text-2xl font-bold">...</span>
                    </div>
                    <div class="green-box w-1/2 rounded-2xl p-4 text-white shadow-md flex flex-col justify-center">
                        <span class="text-xs opacity-80">Vol. Hari Ini</span>
                        <span id="transaction-count" class="text-2xl font-bold">...</span>
                    </div>
                </div>

                <div class="bg-white rounded-3xl p-6 shadow-sm">
                    <p class="text-gray-600 font-semibold mb-1 text-sm">Keuntungan Bersih (Net)</p>
                    <h2 id="net-profit-text" class="text-4xl font-bold text-[#5B8C5A]">IDR 0</h2>
                </div>

                <div class="bg-white rounded-3xl p-6 shadow-sm flex flex-col h-full">
                    <p class="text-gray-600 font-semibold mb-4 text-lg">Pengeluaran Supplier</p>
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-32 h-32 relative"><canvas id="supplierChart"></canvas></div>
                        <div>
                            <p class="text-xl font-bold text-[#D32F2F]">IDR</p>
                            <p id="total-supplier-text" class="text-2xl font-bold text-[#D32F2F]">0</p>
                        </div>
                    </div>
                    <div id="supplier-list" class="space-y-2 text-xs font-semibold text-gray-600 mt-auto"></div>
                </div>
            </div>

            <div class="lg:col-span-8 flex flex-col gap-6">
                
                <div class="flex justify-between lg:justify-end items-center gap-6 mt-2">
                    <label for="date-range" class="bg-white rounded-full px-4 py-2 shadow-sm flex items-center gap-3 border border-gray-100 hover:border-[#5B8C5A] transition-colors cursor-pointer w-72">
                        <i class="fa-solid fa-calendar-days text-[#5B8C5A] text-xl ml-2"></i>
                        <input type="text" id="date-range" placeholder="Pilih Rentang Tanggal" class="text-[#5B8C5A] font-semibold opacity-80 bg-transparent focus:outline-none cursor-pointer py-1 w-full" readonly>
                    </label>
                    
                    <div class="text-[#5B8C5A] text-2xl cursor-pointer"><i class="fa-solid fa-bell"></i></div>

                    <div class="bg-white rounded-full pl-6 pr-2 py-2 shadow-sm flex items-center gap-4">
                        <div class="text-right leading-tight">
                            <p id="store-name" class="text-[#5B8C5A] font-bold text-sm">Memuat...</p>
                            <p id="user-name" class="text-[#5B8C5A] text-xs opacity-70">...</p>
                            <p id="user-role" class="text-[#5B8C5A] font-bold text-[10px] uppercase tracking-wider">...</p>
                        </div>
                        <img id="user-avatar" src="https://ui-avatars.com/api/?background=5B8C5A&color=fff" alt="Profile" class="w-12 h-12 rounded-full object-cover">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-2">
                    <div class="bg-white rounded-3xl p-6 shadow-sm">
                        <p class="text-gray-600 font-semibold mb-4 text-lg">Biaya Operasional</p>
                        <div class="flex items-center gap-4 mb-6">
                            <div class="w-32 h-32 relative"><canvas id="biayaChart"></canvas></div>
                            <div>
                                <p class="text-xl font-bold text-[#D32F2F]">IDR</p>
                                <p id="total-expense-text" class="text-3xl font-bold text-[#D32F2F]">0</p>
                            </div>
                        </div>
                        <div id="expense-list" class="space-y-2 text-xs font-semibold text-gray-600"></div>
                    </div>

                    <div class="bg-white rounded-3xl p-6 shadow-sm">
                        <p class="text-gray-600 font-semibold mb-4 text-lg">Total Pendapatan</p>
                        <div class="flex items-center gap-4 mb-6">
                            <div class="w-32 h-32 relative"><canvas id="pendapatanChart"></canvas></div>
                            <div>
                                <p class="text-xl font-bold text-black">IDR</p>
                                <p id="total-income-text" class="text-3xl font-extrabold text-black">0</p>
                            </div>
                        </div>
                        <div id="income-list" class="space-y-2 text-xs font-semibold text-gray-600"></div>
                    </div>
                </div>

                <div class="green-box rounded-3xl p-6 shadow-sm text-white flex-grow flex flex-col relative">
                    <h3 class="text-xl font-bold mb-4">Transaksi Terakhir</h3>
                    <div class="bg-white/20 rounded-xl p-4 flex-grow overflow-auto">
                        <table class="w-full text-left text-sm">
                            <thead class="border-b border-white/30 text-white/80">
                                <tr>
                                    <th class="pb-2">Waktu</th>
                                    <th class="pb-2">Keterangan</th>
                                    <th class="pb-2 text-right">Nominal</th>
                                </tr>
                            </thead>
                            <tbody id="transaction-history-body" class="font-semibold">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- NAVBAR TIMBUL (NEUMORPHIC) SESUAI DESAIN -->
    <nav class="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
        <div class="bg-[#5B8C5A] rounded-full flex items-center p-1.5 shadow-[0_10px_25px_rgba(0,0,0,0.2)] gap-2">
            
            <!-- Menu Dashboard (Chart) -->
            <a href="/dashboard" 
               class="flex items-center justify-center px-7 py-3 rounded-full transition-all duration-300 
               <?php echo e(request()->is('dashboard') ? 'bg-[#5B8C5A] shadow-[4px_4px_12px_rgba(0,0,0,0.3),-2px_-2px_8px_rgba(255,255,255,0.15)] opacity-100' : 'hover:bg-white/10 opacity-50 hover:opacity-100'); ?>">
                <i class="fa-solid fa-chart-simple text-white text-2xl"></i>
            </a>

            <!-- Menu Tambah Transaksi (Plus) -->
            <a href="/aktivitas" 
               class="flex items-center justify-center px-7 py-3 rounded-full transition-all duration-300 
               <?php echo e(request()->is('aktivitas') ? 'bg-[#5B8C5A] shadow-[4px_4px_12px_rgba(0,0,0,0.3),-2px_-2px_8px_rgba(255,255,255,0.15)] opacity-100' : 'hover:bg-white/10 opacity-50 hover:opacity-100'); ?>">
                <i class="fa-solid fa-plus text-white text-3xl"></i>
            </a>

            <!-- Menu Pengaturan (Gear) -->
            <a href="/settings" 
               class="flex items-center justify-center px-7 py-3 rounded-full transition-all duration-300 
               <?php echo e(request()->is('settings') ? 'bg-[#5B8C5A] shadow-[4px_4px_12px_rgba(0,0,0,0.3),-2px_-2px_8px_rgba(255,255,255,0.15)] opacity-100' : 'hover:bg-white/10 opacity-50 hover:opacity-100'); ?>">
                <i class="fa-solid fa-gear text-white text-2xl"></i>
            </a>

        </div>
    </nav>

    <div class="fixed bottom-6 left-6 bg-white shadow-md rounded-full px-4 py-2 flex items-center gap-2">
        <img src="<?php echo e(asset('images/icon_teratory.png')); ?>" alt="T" class="w-6 h-6 object-contain">
        <span class="text-[#5B8C5A] font-bold text-sm">Teratory V.1.0.0.1</span>
    </div>

    <script>
        const token = localStorage.getItem('teratory_sso_token');
        const storeId = 1;

        if (!token) { window.location.href = "/login"; }

        async function initDashboard() {
            // A. AMBIL PROFIL (DINAMIS)
            try {
                const profileRes = await fetch('http://localhost:8000/api/profile', {
                    method: 'GET',
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                
                if (profileRes.ok) {
                    const profile = await profileRes.json();
                    if (profile.status === 'success') {
                        document.getElementById('store-name').innerText = profile.data.store_name;
                        document.getElementById('user-name').innerText = profile.data.user_name;
                        document.getElementById('user-role').innerText = profile.data.role;
                        document.getElementById('user-avatar').src = `https://ui-avatars.com/api/?name=${profile.data.user_name}&background=5B8C5A&color=fff`;
                    }
                } else {
                    document.getElementById('store-name').innerText = "Gagal Memuat Toko";
                    document.getElementById('user-name').innerText = "Data Tidak Ditemukan";
                    document.getElementById('user-role').innerText = "-";
                }
            } catch (e) { 
                console.warn("Profile API Offline"); 
                document.getElementById('store-name').innerText = "Koneksi Terputus";
            }

            // B. AMBIL DATA FINANSIAL
            try {
                const pnlRes = await fetch('http://localhost:8000/api/reports/pnl', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                    body: JSON.stringify({ store_id: storeId })
                });
                if (pnlRes.ok) {
                    const pnl = await pnlRes.json();
                    if (pnl.status === 'success') updateFinancialUI(pnl.data);
                }
            } catch (e) { console.warn("Finance API Offline"); }
        }

        function formatIDR(val) { return new Intl.NumberFormat('id-ID').format(val); }

        function updateFinancialUI(data) {
            document.getElementById('total-income-text').innerText = formatIDR(data.total_income || 0);
            document.getElementById('total-expense-text').innerText = formatIDR(data.total_expense || 0);
            document.getElementById('net-profit-text').innerText = `IDR. ${formatIDR(data.net_profit || 0)}`;
            
            const detailsArray = Array.isArray(data.details) ? data.details : [];

            const incomeData = detailsArray.filter(d => d.category === 'sales_revenue');
            const expenseData = detailsArray.filter(d => d.category !== 'sales_revenue');

            new Chart(document.getElementById('pendapatanChart'), getChartConfig(incomeData));
            new Chart(document.getElementById('biayaChart'), getChartConfig(expenseData, '#D32F2F'));
        }

        function getChartConfig(details, color = '#5B8C5A') {
            const values = details.map(d => d.total);
            return {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: values.length ? values : [1],
                        backgroundColor: ['#4CAF50', '#8E24AA', '#F44336', '#29B6F6', '#FF9800'],
                        borderWidth: 2
                    }]
                },
                options: { cutout: '70%', plugins: { legend: { display: false } } }
            };
        }

        // INISIALISASI FLATPICKR UNTUK RENTANG TANGGAL
        flatpickr("#date-range", {
            mode: "range",
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d M Y", 
            onChange: function(selectedDates, dateStr, instance) {
                console.log("Rentang tanggal yang dipilih:", dateStr);
            }
        });
        document.addEventListener('DOMContentLoaded', initDashboard);
    </script>
</body>
</html><?php /**PATH C:\xampp\htdocs\teratory\resources\views/dashboard.blade.php ENDPATH**/ ?>