@extends('layouts.app')

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

@section('content')

<div class="container-fluid px-4">
    <!-- HERO SECTION PREMIUM -->
    <div class="dashboard-hero mb-5" data-aos="fade-up">
        <div class="hero-content">
            <div class="hero-text">
                <div class="hero-greeting">
                    <img src="{{ asset('images/logo3.jpg') }}" class="shadow-sm" style="width: 32px; height: 32px; border-radius: 10px; object-fit: cover; margin-right: 5px; border: 2px solid white;">
                    <span class="greeting-text">Admin Panel</span>
                </div>
                <h1 class="hero-title">
                    Welcome Back, <span class="highlight">{{ Auth::user()->username }}</span>
                </h1>
                <p class="hero-subtitle">
                    Kelola toko Anda dengan mudah dan pantau performa bisnis dalam satu dashboard premium
                </p>
            </div>
            <div class="hero-stats">
                <div class="hero-stat-card">
                    <div class="hero-stat-value">{{ $totalPenjualanBulanIni ?? $totalPenjualan }}</div>
                    <div class="hero-stat-label">Transaksi Bulan Ini</div>
                </div>
                <div class="hero-stat-card">
                    <div class="hero-stat-value">Rp {{ number_format($totalPendapatanBulanIni ?? $totalPendapatan, 0, ',', '.') }}</div>
                    <div class="hero-stat-label">Pendapatan Bulan Ini</div>
                </div>
            </div>
        </div>
        <div class="hero-decoration">
            <div class="hero-circle circle-1"></div>
            <div class="hero-circle circle-2"></div>
            <div class="hero-circle circle-3"></div>
            <div class="hero-floating floating-1">✨</div>
            <div class="hero-floating floating-2">💖</div>
            <div class="hero-floating floating-3">👑</div>
        </div>
    </div>

    <!-- STATISTICS CARDS PREMIUM - 4 CARDS -->
    <div class="stats-section mb-5">
        <h5 class="section-title" data-aos="fade-up">
            <i class="bi bi-graph-up"></i> Ringkasan Bisnis
        </h5>
        <div class="stats-grid">
            <!-- Total Produk -->
            <div class="stat-card premium-card-1" data-aos="fade-up" data-aos-delay="100">
                <div class="stat-card-inner">
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-box-seam"></i>
                    </div>
                    <div class="stat-info">
                        <p class="stat-label">Total Produk</p>
                        <h3 class="stat-value">{{ $totalProduk }}</h3>
                        <div class="stat-footer">
                            <span class="stat-period">Semua produk</span>
                            <span class="stat-trend positive">
                                <i class="bi bi-arrow-up-short"></i> +{{ $produkBaru ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="stat-bg-decoration"></div>
            </div>

            <!-- Total Penjualan -->
            <div class="stat-card premium-card-2" data-aos="fade-up" data-aos-delay="150">
                <div class="stat-card-inner">
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-receipt"></i>
                    </div>
                    <div class="stat-info">
                        <p class="stat-label">Total Penjualan</p>
                        <h3 class="stat-value">{{ $totalPenjualan }}</h3>
                        <div class="stat-footer">
                            <span class="stat-period">Semua transaksi</span>
                            <span class="stat-trend positive">
                                <i class="bi bi-arrow-up-short"></i> +{{ $penjualanBaru ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="stat-bg-decoration"></div>
            </div>

            <!-- Total Pendapatan -->
            <div class="stat-card premium-card-3" data-aos="fade-up" data-aos-delay="200">
                <div class="stat-card-inner">
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-currency-dollar"></i>
                    </div>
                    <div class="stat-info">
                        <p class="stat-label">Total Pendapatan</p>
                        <h3 class="stat-value">Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</h3>
                        <div class="stat-footer">
                            <span class="stat-period">Bulan ini</span>
                            <span class="stat-trend positive">
                                <i class="bi bi-arrow-up-short"></i> +15.3%
                            </span>
                        </div>
                    </div>
                </div>
                <div class="stat-bg-decoration"></div>
            </div>

            <!-- Total Kategori -->
            <div class="stat-card premium-card-4" data-aos="fade-up" data-aos-delay="250">
                <div class="stat-card-inner">
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-tags"></i>
                    </div>
                    <div class="stat-info">
                        <p class="stat-label">Total Merk</p>
                        <h3 class="stat-value">{{ $totalKategori }}</h3>
                        <div class="stat-footer">
                            <span class="stat-period">Aktif</span>
                            <span class="stat-trend neutral">
                                <i class="bi bi-dash-short"></i> Stabil
                            </span>
                        </div>
                    </div>
                </div>
                <div class="stat-bg-decoration"></div>
            </div>
        </div>
    </div>

    <!-- CHARTS SECTION PREMIUM -->
    <div class="row g-4 mb-5">
        <!-- Grafik Per Bulan -->
        <div class="col-xl-7" data-aos="fade-up" data-aos-delay="100">
            <div class="premium-chart-card">
                <div class="chart-header">
                    <div class="chart-header-left">
                        <div class="chart-icon gradient-pink">
                            <i class="bi bi-graph-up"></i>
                        </div>
                        <div>
                            <h5>Penjualan Per Bulan</h5>
                            <p>Tren penjualan tahun <span id="selectedYear">{{ $currentYear }}</span></p>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="btn-year-dropdown" type="button" data-bs-toggle="dropdown">
                            <i class="bi bi-calendar3"></i> Tahun {{ $currentYear }}
                            <i class="bi bi-chevron-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            @foreach($availableYears as $year)
                                <li>
                                    <a class="dropdown-item year-filter" href="#" data-year="{{ $year }}">
                                        Tahun {{ $year }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="chart-body">
                    <canvas id="monthlySalesChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Grafik Per Tahun -->
        <div class="col-xl-5" data-aos="fade-up" data-aos-delay="200">
            <div class="premium-chart-card">
                <div class="chart-header">
                    <div class="chart-header-left">
                        <div class="chart-icon gradient-purple">
                            <i class="bi bi-bar-chart"></i>
                        </div>
                        <div>
                            <h5>Penjualan Per Tahun</h5>
                            <p>Performa 5 tahun terakhir</p>
                        </div>
                    </div>
                </div>
                <div class="chart-body">
                    <canvas id="yearlySalesChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- ALERT CARDS PREMIUM -->
    <div class="row g-4 mb-5">
        <!-- Stok Rendah -->
        <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <div class="premium-alert-card warning-alert">
                <div class="alert-header">
                    <div class="alert-icon">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>
                    <div class="alert-info">
                        <h5>⚠️ Stok Produk Menipis</h5>
                        <p>Perlu segera direstock</p>
                    </div>
                    <span class="alert-badge warning">
                        <i class="bi bi-box"></i> {{ $stokRendah }} Produk
                    </span>
                </div>
                <div class="alert-body">
                    @if($produkStokRendah->count() > 0)
                        <div class="product-list-premium">
                            @foreach($produkStokRendah as $produk)
                            <div class="product-item-premium">
                                <div class="product-info-premium">
                                    <div class="product-icon @if($produk->stok == 0) danger @elseif($produk->stok < 3) warning @endif">
                                        @if($produk->stok == 0)
                                            <i class="bi bi-x-circle"></i>
                                        @elseif($produk->stok < 3)
                                            <i class="bi bi-exclamation-triangle"></i>
                                        @else
                                            <i class="bi bi-box"></i>
                                        @endif
                                    </div>
                                    <div>
                                        <h6>{{ $produk->nama_produk }}</h6>
                                        <span class="product-category">{{ $produk->kategori->nama_kategori ?? 'Uncategorized' }}</span>
                                    </div>
                                </div>
                                <div class="product-stats-premium">
                                    <div class="stock-indicator">
                                        <span class="stock-label">Stok</span>
                                        <strong class="stock-value @if($produk->stok == 0) text-danger @elseif($produk->stok < 3) text-warning @endif">
                                            {{ $produk->stok }}
                                        </strong>
                                    </div>
                                    <a href="{{ route('product.edit', $produk->produk_id) }}" class="restock-btn">
                                        <i class="bi bi-plus-circle"></i> Restock
                                    </a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="empty-premium">
                            <i class="bi bi-check-circle-fill"></i>
                            <p>Semua stok aman! 🎉</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Produk Hampir Kadaluarsa -->
        <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
            <div class="premium-alert-card danger-alert">
                <div class="alert-header">
                    <div class="alert-icon">
                        <i class="bi bi-calendar-x"></i>
                    </div>
                    <div class="alert-info">
                        <h5>⏰ Hampir Kadaluarsa</h5>
                        <p>Perhatikan masa berlaku produk</p>
                    </div>
                    <span class="alert-badge danger">
                        <i class="bi bi-hourglass"></i> {{ $hampirKadaluarsa->count() }} Produk
                    </span>
                </div>
                <div class="alert-body">
                    @if($hampirKadaluarsa->count() > 0)
                        <div class="product-list-premium">
                            @foreach($hampirKadaluarsa as $produk)
                            @php
                                $sisaHari = \Carbon\Carbon::parse($produk->tanggal_kadaluarsa)->diffInDays(now());
                            @endphp
                            <div class="product-item-premium">
                                <div class="product-info-premium">
                                    <div class="product-icon expiry">
                                        <i class="bi bi-calendar"></i>
                                    </div>
                                    <div>
                                        <h6>{{ $produk->nama_produk }}</h6>
                                        <span class="product-category">Stok: {{ $produk->stok }}</span>
                                    </div>
                                </div>
                                <div class="product-stats-premium">
                                    <div class="expiry-indicator">
                                        <span class="expiry-label">Kadaluarsa</span>
                                        <strong class="expiry-value @if($sisaHari <= 7) urgent @elseif($sisaHari <= 15) warning @endif">
                                            {{ $sisaHari }} hari
                                        </strong>
                                    </div>
                                    <a href="{{ route('product.edit', $produk->produk_id) }}" class="detail-btn">
                                        <i class="bi bi-eye"></i> Detail
                                    </a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="empty-premium">
                            <i class="bi bi-calendar-check-fill"></i>
                            <p>Tidak ada produk hampir kadaluarsa 👍</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- QUICK ACTIONS PREMIUM -->
    <div class="quick-actions-section mb-5" data-aos="fade-up" data-aos-delay="300">
        <h5 class="section-title">
            <i class="bi bi-lightning-charge-fill"></i> Aksi Cepat
        </h5>
        <div class="actions-grid">
            <a href="{{ route('product.create') }}" class="action-premium-card">
                <div class="action-premium-icon gradient-pink">
                    <i class="bi bi-plus-lg"></i>
                </div>
                <div class="action-premium-info">
                    <h6>Tambah Produk</h6>
                    <span>Tambah produk baru</span>
                </div>
                <i class="bi bi-arrow-right-circle action-premium-arrow"></i>
            </a>
            <a href="{{ route('product.index') }}" class="action-premium-card">
                <div class="action-premium-icon gradient-purple">
                    <i class="bi bi-pencil-square"></i>
                </div>
                <div class="action-premium-info">
                    <h6>Kelola Produk</h6>
                    <span>Edit & hapus produk</span>
                </div>
                <i class="bi bi-arrow-right-circle action-premium-arrow"></i>
            </a>
            <a href="{{ route('kategori.index') }}" class="action-premium-card">
                <div class="action-premium-icon gradient-gold">
                    <i class="bi bi-tags"></i>
                </div>
                <div class="action-premium-info">
                    <h6>Kelola Merk</h6>
                    <span>Atur Merk produk</span>
                </div>
                <i class="bi bi-arrow-right-circle action-premium-arrow"></i>
            </a>
            <a href="{{ route('penjualan.index') }}" class="action-premium-card">
                <div class="action-premium-icon gradient-success">
                    <i class="bi bi-receipt"></i>
                </div>
                <div class="action-premium-info">
                    <h6>Lihat Transaksi</h6>
                    <span>Semua order masuk</span>
                </div>
                <i class="bi bi-arrow-right-circle action-premium-arrow"></i>
            </a>
        </div>
    </div>

    <!-- BONUS: SYSTEM STATUS & TIPS -->
    <div class="row g-4" data-aos="fade-up" data-aos-delay="400">
        <div class="col-md-6">
            <div class="info-card">
                <div class="info-icon gradient-pink">
                    <i class="bi bi-info-circle-fill"></i>
                </div>
                <div class="info-content">
                    <h6>Sistem Status</h6>
                    <p>Semua sistem berjalan normal</p>
                    <div class="status-badge online">
                        <i class="bi bi-circle-fill"></i> Online
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="info-card">
                <div class="info-icon gradient-gold">
                    <i class="bi bi-lightbulb-fill"></i>
                </div>
                <div class="info-content">
                    <h6>Tips Admin</h6>
                    <p>Pantau stok produk secara rutin untuk menghindari kehabisan stok</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
// Data untuk grafik dari controller
const monthlySalesData = {
    labels: {!! json_encode($monthlyLabels) !!},
    datasets: [{
        label: 'Penjualan',
        data: {!! json_encode($monthlyData) !!},
        borderColor: '#FF6B9D',
        backgroundColor: 'rgba(255, 107, 157, 0.1)',
        borderWidth: 3,
        fill: true,
        tension: 0.4,
        pointBackgroundColor: '#FF6B9D',
        pointBorderColor: '#ffffff',
        pointBorderWidth: 2,
        pointRadius: 5,
        pointHoverRadius: 8,
        pointHoverBackgroundColor: '#FF6B9D'
    }]
};

const yearlySalesData = {
    labels: {!! json_encode($yearlyLabels) !!},
    datasets: [{
        label: 'Total Penjualan',
        data: {!! json_encode($yearlyData) !!},
        backgroundColor: [
            'rgba(255, 107, 157, 0.8)',
            'rgba(192, 132, 252, 0.8)',
            'rgba(251, 191, 36, 0.8)',
            'rgba(52, 211, 153, 0.8)',
            'rgba(236, 72, 153, 0.8)'
        ],
        borderRadius: 12,
        borderSkipped: false,
        barPercentage: 0.65,
        categoryPercentage: 0.8
    }]
};

let monthlySalesChart, yearlySalesChart;

// Inisialisasi grafik
document.addEventListener('DOMContentLoaded', function() {
    // Grafik Penjualan Per Bulan
    const monthlyCtx = document.getElementById('monthlySalesChart').getContext('2d');
    monthlySalesChart = new Chart(monthlyCtx, {
        type: 'line',
        data: monthlySalesData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    titleColor: '#FF6B9D',
                    bodyColor: '#6B7280',
                    borderColor: '#FFE0EB',
                    borderWidth: 1,
                    cornerRadius: 12,
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                            return `📊 Penjualan: ${context.parsed.y} transaksi`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(255, 107, 157, 0.1)' },
                    ticks: { color: '#9CA3AF', stepSize: 1 }
                },
                x: {
                    grid: { display: false },
                    ticks: { color: '#9CA3AF' }
                }
            }
        }
    });

    // Grafik Penjualan Per Tahun
    const yearlyCtx = document.getElementById('yearlySalesChart').getContext('2d');
    yearlySalesChart = new Chart(yearlyCtx, {
        type: 'bar',
        data: yearlySalesData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    titleColor: '#FF6B9D',
                    bodyColor: '#6B7280',
                    borderColor: '#FFE0EB',
                    borderWidth: 1,
                    cornerRadius: 12,
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                            return `📊 Total: ${context.parsed.y} transaksi`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(255, 107, 157, 0.1)' },
                    ticks: { color: '#9CA3AF', stepSize: 1 }
                },
                x: {
                    grid: { display: false },
                    ticks: { color: '#9CA3AF', font: { weight: 'bold' } }
                }
            }
        }
    });

    // Event listener untuk dropdown tahun
    const yearFilters = document.querySelectorAll('.year-filter');
    yearFilters.forEach(filter => {
        filter.addEventListener('click', function(e) {
            e.preventDefault();
            const year = this.getAttribute('data-year');
            changeYear(year);
        });
    });
});

// Function untuk mengganti tahun
function changeYear(year) {
    const dropdownToggle = document.querySelector('.btn-year-dropdown');
    const originalText = dropdownToggle.innerHTML;
    dropdownToggle.innerHTML = `<i class="bi bi-calendar3"></i> Loading... <i class="bi bi-chevron-down"></i>`;
    
    fetch(`/admin/dashboard/sales-data?year=${year}`)
        .then(response => response.json())
        .then(data => {
            monthlySalesChart.data.labels = data.labels;
            monthlySalesChart.data.datasets[0].data = data.values;
            monthlySalesChart.update();
            
            dropdownToggle.innerHTML = `<i class="bi bi-calendar3"></i> Tahun ${year} <i class="bi bi-chevron-down"></i>`;
            document.getElementById('selectedYear').textContent = year;
        })
        .catch(error => {
            console.error('Error:', error);
            dropdownToggle.innerHTML = originalText;
            alert('Terjadi error saat memuat data');
        });
}
</script>

<style>
:root {
    --pink-gradient: linear-gradient(135deg, #FF6B9D 0%, #FF85B3 100%);
    --purple-gradient: linear-gradient(135deg, #C084FC 0%, #D8B4FE 100%);
    --gold-gradient: linear-gradient(135deg, #FBBF24 0%, #FCD34D 100%);
    --success-gradient: linear-gradient(135deg, #34D399 0%, #6EE7B7 100%);
    --danger-gradient: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
    --warning-gradient: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    --card-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 25px 45px -12px rgba(255, 107, 157, 0.25);
}

/* DASHBOARD HERO */
.dashboard-hero {
    background: linear-gradient(135deg, #FFF0F5 0%, #FFE0EB 50%, #FFF9F5 100%);
    border-radius: 32px;
    padding: 2rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-greeting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 107, 157, 0.15);
    padding: 6px 16px;
    border-radius: 60px;
    margin-bottom: 1rem;
}

.greeting-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #FF6B9D;
}

.hero-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
}

.hero-title .highlight {
    background: linear-gradient(135deg, #FF6B9D, #C084FC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    color: #6B7280;
    font-size: 0.9rem;
    max-width: 450px;
}

.hero-stats {
    display: flex;
    gap: 1.5rem;
}

.hero-stat-card {
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 107, 157, 0.2);
}

.hero-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #FF6B9D;
}

.hero-stat-label {
    font-size: 0.7rem;
    color: #9CA3AF;
}

.hero-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 107, 157, 0.08);
}

.circle-1 { width: 250px; height: 250px; top: -100px; right: -50px; }
.circle-2 { width: 180px; height: 180px; bottom: -60px; left: -60px; }
.circle-3 { width: 120px; height: 120px; top: 40%; right: 20%; }

.hero-floating {
    position: absolute;
    font-size: 1.5rem;
    animation: floatElement 6s infinite ease-in-out;
}

.floating-1 { top: 15%; right: 15%; animation-delay: 0s; }
.floating-2 { bottom: 20%; left: 10%; animation-delay: 1s; }
.floating-3 { top: 50%; right: 30%; animation-delay: 2s; }

@keyframes floatElement {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(10deg); }
}

/* Section Title */
.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i {
    color: #FF6B9D;
    font-size: 1.2rem;
}

/* Stats Grid */
.stats-section {
    margin-top: 0.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: white;
    border-radius: 28px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--card-shadow);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.stat-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 1rem;
}

.stat-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.premium-card-1 .stat-icon-wrapper { background: var(--pink-gradient); }
.premium-card-2 .stat-icon-wrapper { background: var(--purple-gradient); }
.premium-card-3 .stat-icon-wrapper { background: var(--gold-gradient); }
.premium-card-4 .stat-icon-wrapper { background: var(--success-gradient); }

.stat-info { flex: 1; }
.stat-label { font-size: 0.8rem; color: #9CA3AF; margin-bottom: 0.5rem; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: #1a1a2e; margin-bottom: 0.5rem; }
.stat-footer { display: flex; justify-content: space-between; align-items: center; }
.stat-period { font-size: 0.7rem; color: #9CA3AF; }
.stat-trend { font-size: 0.7rem; font-weight: 600; display: flex; align-items: center; gap: 2px; }
.stat-trend.positive { color: #10B981; }
.stat-trend.neutral { color: #F59E0B; }

.stat-bg-decoration {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: rgba(255, 107, 157, 0.05);
    border-radius: 50%;
}

/* Premium Chart Cards */
.premium-chart-card {
    background: white;
    border-radius: 28px;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    height: 100%;
}

.premium-chart-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.chart-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.chart-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.gradient-pink { background: var(--pink-gradient); }
.gradient-purple { background: var(--purple-gradient); }

.chart-header-left h5 {
    font-weight: 700;
    margin-bottom: 0.1rem;
    color: #1a1a2e;
}

.chart-header-left p {
    font-size: 0.7rem;
    color: #9CA3AF;
    margin-bottom: 0;
}

.btn-year-dropdown {
    background: linear-gradient(135deg, #FDF2F8, #FFE0EB);
    border: none;
    padding: 8px 16px;
    border-radius: 40px;
    color: #FF6B9D;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.btn-year-dropdown:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.2);
}

.chart-body {
    height: 280px;
    position: relative;
}

/* Premium Alert Cards */
.premium-alert-card {
    background: white;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    height: 100%;
}

.premium-alert-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.alert-header {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.warning-alert .alert-header { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); }
.danger-alert .alert-header { background: linear-gradient(135deg, #FEF2F2, #FEE2E2); }

.alert-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.warning-alert .alert-icon { background: var(--warning-gradient); }
.danger-alert .alert-icon { background: var(--danger-gradient); }

.alert-info { flex: 1; }
.alert-info h5 { font-weight: 700; margin-bottom: 0.1rem; color: #1a1a2e; font-size: 1rem; }
.alert-info p { font-size: 0.7rem; color: #9CA3AF; margin-bottom: 0; }

.alert-badge {
    padding: 6px 14px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
}

.alert-badge.warning { background: #FEF3C7; color: #D97706; }
.alert-badge.danger { background: #FEE2E2; color: #DC2626; }

.alert-body { padding: 1rem; }

/* Product List Premium */
.product-list-premium {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 320px;
    overflow-y: auto;
}

.product-item-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #F8F9FA;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.product-item-premium:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
}

.product-info-premium {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.product-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FDF2F8, #FFE0EB);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #FF6B9D;
}

.product-icon.warning { background: #FEF3C7; color: #D97706; }
.product-icon.danger { background: #FEE2E2; color: #DC2626; }
.product-icon.expiry { background: #FEE2E2; color: #EF4444; }

.product-info-premium h6 {
    font-weight: 600;
    margin-bottom: 0.1rem;
    font-size: 0.85rem;
    color: #1a1a2e;
}

.product-category {
    font-size: 0.7rem;
    color: #9CA3AF;
}

.product-stats-premium {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stock-indicator, .expiry-indicator {
    text-align: center;
}

.stock-label, .expiry-label {
    font-size: 0.65rem;
    color: #9CA3AF;
    display: block;
}

.stock-value, .expiry-value {
    font-size: 0.85rem;
    font-weight: 700;
}

.stock-value.text-danger { color: #DC2626; }
.stock-value.text-warning { color: #D97706; }
.expiry-value.urgent { color: #DC2626; }
.expiry-value.warning { color: #D97706; }

.restock-btn, .detail-btn {
    background: none;
    border: 1px solid #10B981;
    color: #10B981;
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.restock-btn:hover {
    background: #10B981;
    color: white;
}

.detail-btn {
    border-color: #FF6B9D;
    color: #FF6B9D;
}

.detail-btn:hover {
    background: #FF6B9D;
    color: white;
}

.empty-premium {
    text-align: center;
    padding: 2rem;
}

.empty-premium i {
    font-size: 2.5rem;
    color: #10B981;
    margin-bottom: 0.75rem;
}

.empty-premium p {
    color: #9CA3AF;
    font-size: 0.85rem;
}

/* Quick Actions */
.quick-actions-section {
    margin-top: 0.5rem;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.action-premium-card {
    background: white;
    border-radius: 20px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 107, 157, 0.1);
    box-shadow: var(--card-shadow);
}

.action-premium-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: rgba(255, 107, 157, 0.3);
}

.action-premium-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.gradient-pink { background: var(--pink-gradient); }
.gradient-purple { background: var(--purple-gradient); }
.gradient-gold { background: var(--gold-gradient); }
.gradient-success { background: var(--success-gradient); }

.action-premium-info { flex: 1; }
.action-premium-info h6 { font-weight: 700; color: #1a1a2e; margin-bottom: 0.1rem; font-size: 0.9rem; }
.action-premium-info span { font-size: 0.7rem; color: #9CA3AF; }

.action-premium-arrow {
    color: #D1D5DB;
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

.action-premium-card:hover .action-premium-arrow {
    transform: translateX(5px);
    color: #FF6B9D;
}

/* Info Cards */
.info-card {
    background: white;
    border-radius: 20px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.info-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.info-content { flex: 1; }
.info-content h6 { font-weight: 700; color: #1a1a2e; margin-bottom: 0.25rem; }
.info-content p { font-size: 0.8rem; color: #6B7280; margin-bottom: 0; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.status-badge.online {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.online i {
    font-size: 0.5rem;
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-aos] {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .chart-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .dashboard-hero {
        padding: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .product-item-premium {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .product-stats-premium {
        width: 100%;
        justify-content: space-between;
    }
    
    .alert-header {
        flex-wrap: wrap;
    }
    
    .hero-stat-value {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .hero-stats {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-stat-card {
        padding: 0.5rem 1rem;
    }
}
</style>
@endsection