<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Dashboard Admin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #fcfcfc; margin: 0; }
        .main-wrapper { display: flex; height: 100vh; overflow: hidden; }

        /* SIDEBAR */
        .sidebar { 
            width: 240px; 
            background: #fff;
            border-right: 1px solid #eee; 
            display: flex; 
            flex-direction: column; 
            padding: 25px 0;
            flex-shrink: 0;
            height: 100vh;
        }
        
        .brand { font-size: 22px; font-weight: 700; padding: 0 25px 30px; letter-spacing: -0.5px; }
        
        .nav-menu { list-style: none; padding: 0; flex-grow: 1; }
        .nav-item { padding: 2px 25px; }
        
        /* LINK DEFAULT (Warna hitam, bukan abu-abu) */
        .nav-link { 
            text-decoration: none; 
            color: #333 !important; 
            font-size: 14px; 
            padding: 12px 15px; 
            border-radius: 8px; 
            display: flex; 
            align-items: center; 
            transition: 0.2s;
        }

        /* KOTAK HIJAU SAAT AKTIF */
        .nav-link.active { 
            background: #28a745 !important; /* Hijau Solid */
            color: #fff !important;         /* Teks Putih agar kontras */
            font-weight: 600; 
        }

        /* Mencegah warna biru bawaan bootstrap saat diklik/focus */
        .nav-link:hover { background: #f8f9fa; }
        .nav-link:focus { background: transparent; }
        .nav-link.active:hover { background: #28a745 !important; }

        .nav-link i { margin-right: 12px; width: 18px; font-size: 15px; }
        
        .sidebar-footer { padding: 0 25px; }
        .logout-btn { 
            background: none; border: none; color: #dc3545; font-size: 14px; 
            padding: 10px 15px; cursor: pointer; display: flex; align-items: center; width: 100%;
        }
        .logout-btn i { margin-right: 12px; }

        .content { flex-grow: 1; padding: 20px 40px; overflow-y: auto; height: 100vh; }

        .card-stat { border: 1px solid #eee; border-radius: 8px; padding: 15px; background: #fff; }
        .table-card { border: 1px solid #eee; border-radius: 8px; background: #fff; }
        .btn-outline-secondary { border-color: #dee2e6; color: #6c757d; }
        .btn-outline-secondary.active { background-color: #e9ecef; color: #000; }

        /* Styling Header yang rapi */
        .top-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 30px; 
            padding-bottom: 20px;
            border-bottom: 2px solid #eee;
            /* Menarik garis ke kiri dan kanan agar menembus padding konten */
            margin-left: -40px;  
            margin-right: -40px; 
            
            /* Memberi padding agar isi header tidak ikut menempel ke pinggir */
            padding-left: 40px;  
            padding-right: 40px;
        }
        .search-bar { 
            width: 350px; 
            padding: 8px 15px; 
            border: 1px solid #ddd; 
            border-radius: 8px; 
            font-size: 14px;
            background: #fdfdfd;
        }
        .user-panel { display: flex; align-items: center; gap: 20px; }
        
    </style>
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar">
        <div class="brand">TEH TARIK 99</div>
        
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="/admin/dashboard" class="nav-link {{ request()->is('admin/dashboard') ? 'active' : '' }}">
                    <i class="fa fa-home"></i> Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/produk" class="nav-link {{ request()->is('admin/produk') ? 'active' : '' }}">
                    <i class="fa fa-box"></i> Produk
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/resep" class="nav-link {{ request()->is('admin/resep') ? 'active' : '' }}">
                    <i class="fa fa-cubes"></i> Atur Resep
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/kontrol-stok" class="nav-link {{ request()->is('admin/kontrol-stok') ? 'active' : '' }}">
                    <i class="fa fa-list-check"></i> Kontrol Stok
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/laporan" class="nav-link {{ request()->is('admin/laporan') ? 'active' : '' }}">
                    <i class="fa fa-chart-line"></i> Laporan
                </a>
            </li>
        </ul>

        <div class="sidebar-footer">
            <a href="#" class="nav-link"><i class="fa-solid fa-user"></i> Profil</a>
            <form action="{{ route('logout') }}" method="POST">
                @csrf
                <button type="submit" class="logout-btn"><i class="fa-solid fa-right-from-bracket"></i> Keluar</button>
            </form>
        </div>
    </div>

    <div class="content">
        <div class="top-header">
            <input type="text" class="search-bar" id="search-menu" placeholder="Search operational data...">
            <div class="user-panel d-flex align-items-center gap-3">
                <i class="fa-solid fa-bell fs-5"></i>
                <div class="text-end" style="line-height: 1.2;">
                    <div class="fw-bold small">{{ auth()->user()->name }}</div>
                    <div class="text-muted" style="font-size: 0.7rem;">Kasir</div>
                </div>
                <img src="https://ui-avatars.com/api/?name={{ urlencode(auth()->user()->name) }}&background=448b39&color=fff" 
                    class="user-avatar" style="width: 40px; height: 40px; border-radius: 50%;">
            </div>
        </div>
        
        <div class="main-scroll">
            <h4 class="fw-bold m-0">Dashboard</h4>
            @php
                // 1. Mengatur zona waktu
                date_default_timezone_set('Asia/Jakarta');
                
                // 2. Logika ucapan berdasarkan jam
                $jam = (int)date('H');
                if ($jam >= 18) {
                    $ucapan = "Selamat Malam";
                } elseif ($jam >= 15) {
                    $ucapan = "Selamat Sore";
                } elseif ($jam >= 11) {
                    $ucapan = "Selamat Siang";
                } else {
                    $ucapan = "Selamat Pagi";
                }

                // 3. Format Tanggal Indonesia
                $hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
                $bulan = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                $tanggalLengkap = $hari[date('w')] . ', ' . date('d') . ' ' . $bulan[date('n')] . ' ' . date('Y');
            @endphp
            <p class="text-muted small mb-4">
                {{ $tanggalLengkap }} | {{ $ucapan }}, {{ auth()->user()->name }}
            </p>

        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <div class="card-stat">
                    <div class="d-flex justify-content-between">
                        <small class="text-muted">Total Pendapatan Bulan Ini</small>
                        <i class="fa fa-wallet text-primary"></i>
                    </div>
                    <div class="fw-bold fs-4">Rp {{ number_format($pendapatanBulanIni, 0, ',', '.') }}</div>
                    <small class="{{ $persenPendapatan >= 0 ? 'text-success' : 'text-danger' }}" style="font-size: 11px;">
                        <i class="fa fa-arrow-{{ $persenPendapatan >= 0 ? 'up' : 'down' }}"></i> 
                        {{ number_format(abs($persenPendapatan), 1) }}% vs last month
                    </small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-stat">
                    <div class="d-flex justify-content-between">
                        <small class="text-muted">Total Transaksi</small>
                        <i class="fa fa-file-alt text-success"></i>
                    </div>
                    <div class="fw-bold fs-4">{{ $transaksiBulanIni }}</div>
                    <small class="{{ $persenTransaksi >= 0 ? 'text-success' : 'text-danger' }}" style="font-size: 11px;">
                        <i class="fa fa-arrow-{{ $persenTransaksi >= 0 ? 'up' : 'down' }}"></i> 
                        {{ number_format(abs($persenTransaksi), 1) }}% vs last month
                    </small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-stat">
                    <div class="d-flex justify-content-between">
                        <small class="text-muted">Jumlah Menu Produk</small>
                        <i class="fa fa-utensils text-dark"></i>
                    </div>
                    <div class="fw-bold fs-4">{{ $jumlahProduk }}</div>
                    <small class="text-muted" style="font-size: 11px;"><i class="fa fa-box"></i> Active Inventory</small>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-8">
                <div class="table-card p-3">
                    <div class="d-flex justify-content-between mb-3">
                        <h6 class="fw-bold">Tren Penjualan</h6>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-secondary active" id="btnHarian">Harian</button>
                            <button class="btn btn-outline-secondary" id="btnMingguan">Mingguan</button>
                        </div>
                    </div>
                    <div style="height: 550px; width: 100%;">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="table-card p-3 mb-3">
                    <h6 class="fw-bold text-danger">
                        <i class="fa fa-exclamation-triangle"></i> Notifikasi Stok Kritis
                    </h6>
                    
                    <div class="mt-3">
                        @foreach($stokKritis as $item)
                            <div class="alert alert-danger p-2 mb-2" style="font-size: 12px;">
                                {{ $item->nama_bahan }} <br> 
                                <b>Sisa: {{ $item->stok }}</b>
                            </div>
                        @endforeach
                    </div>

                    <div class="text-center mt-3">
                        <a href="/admin/stok" class="text-decoration-none fw-bold" style="font-size: 13px; color: #0d6efd;">
                            Lihat Inventaris Lengkap
                        </a>
                    </div>
                </div>

                <div class="table-card p-3">
                    <h6 class="fw-bold">Aktivitas Terkini</h6>
                    <ul class="list-unstyled mt-3" style="font-size: 13px;">
                        @foreach($aktivitasTerkini as $aktivitas)
                            <li class="mb-3 d-flex align-items-start">
                                <i class="fa fa-circle text-success mt-1 me-2" style="font-size: 8px;"></i>
                                <div>
                                    <div class="fw-bold text-dark">Transaksi Baru #{{ $aktivitas->id }}</div>
                                    <div class="text-muted" style="font-size: 11px;">
                                        {{ $aktivitas->created_at->diffForHumans() }} • Rp {{ number_format($aktivitas->total_harga, 0, ',', '.') }}
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line', // Anda bisa ganti ke 'bar' jika ingin grafik batang
        data: {
            labels: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'], // Label hari
            datasets: [{
                label: 'Penjualan (Rp)',
                data: [12000, 19000, 3000, 5000, 20000, 30000, 15000], // Data ini nanti bisa diambil dari Controller
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });

    // Data contoh (nanti bisa diganti dengan fetch data dari database)
    const dataHarian = [12000, 19000, 3000, 5000, 20000, 30000, 15000];
    const dataMingguan = [80000, 95000, 70000, 120000]; // Data mingguan

    const btnHarian = document.getElementById('btnHarian');
    const btnMingguan = document.getElementById('btnMingguan');

    // Fungsi update data
    function updateChart(newData, newLabels) {
        myChart.data.datasets[0].data = newData;
        myChart.data.labels = newLabels;
        myChart.update();
    }

    btnHarian.addEventListener('click', function() {
        btnHarian.classList.add('active');
        btnMingguan.classList.remove('active');
        updateChart(dataHarian, ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']);
    });

    btnMingguan.addEventListener('click', function() {
        btnMingguan.classList.add('active');
        btnHarian.classList.remove('active');
        updateChart(dataMingguan, ['Minggu 1', 'Minggu 2', 'Minggu 3', 'Minggu 4']);
    });
</script>

</body>
</html>