<x-app-layout>
    @section('title', 'Admin Dashboard - INTERIA')

    @push('styles')
    <style>
        /* Base Styles - Clean Light Theme */
        body {
            background: #f8fafc;
        }

        /* Modern Stat Cards - Light & Elegant */
        .stat-card {
            background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
            border-radius: 1.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
            transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(203, 213, 225, 0.4);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #f97316, #fbbf24, #f97316);
            background-size: 200% 100%;
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }

        .stat-card:hover::before {
            transform: scaleX(1);
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
            border-color: rgba(249, 115, 22, 0.2);
        }

        .stat-icon {
            width: 3.25rem;
            height: 3.25rem;
            border-radius: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%);
            color: #f97316;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.02);
        }

        /* Modern Glass Cards - Light Acrylic */
        .glass-card {
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(0px);
            border-radius: 1.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.02);
            border: 1px solid rgba(203, 213, 225, 0.5);
            transition: all 0.35s ease;
        }

        .glass-card:hover {
            box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.06);
            border-color: rgba(249, 115, 22, 0.2);
        }

        /* Welcome Card - Warm Gradient */
        .welcome-card {
            background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 50%, #fde68a 100%);
            border-radius: 1.75rem;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 20px -6px rgba(251, 146, 60, 0.15);
        }

        .welcome-card::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -10%;
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
            border-radius: 50%;
        }

        .welcome-card::after {
            content: '';
            position: absolute;
            bottom: -20%;
            left: -5%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
            border-radius: 50%;
        }

        /* Status Badges - Soft Colors */
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.3rem 0.85rem;
            border-radius: 2rem;
            font-size: 0.7rem;
            font-weight: 600;
            gap: 0.5rem;
            letter-spacing: 0.01em;
        }

        .status-pending {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #fed7aa;
        }

        .status-processing {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .status-completed {
            background: #f0fdf4;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }

        .status-cancelled {
            background: #fef2f2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        /* Quick Action Buttons - Clean */
        .quick-action {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 1.25rem;
            padding: 1rem 1.25rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            text-decoration: none;
        }

        .quick-action:hover {
            border-color: #f97316;
            transform: translateY(-2px);
            box-shadow: 0 12px 20px -12px rgba(249, 115, 22, 0.2);
            background: #fffaf5;
        }

        .quick-action-icon {
            width: 2.75rem;
            height: 2.75rem;
            background: #fff7ed;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f97316;
            transition: all 0.2s ease;
        }

        .quick-action:hover .quick-action-icon {
            background: #f97316;
            color: white;
            transform: scale(0.95);
        }

        /* Modern Table */
        .modern-table {
            width: 100%;
        }

        .modern-table thead th {
            background: #fafcff;
            padding: 0.9rem 1rem;
            font-size: 0.7rem;
            font-weight: 700;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            border-bottom: 1px solid #eef2ff;
        }

        .modern-table tbody td {
            padding: 1rem;
            border-bottom: 1px solid #f8fafc;
            vertical-align: middle;
        }

        .modern-table tbody tr {
            transition: background 0.2s ease;
        }

        .modern-table tbody tr:hover {
            background: #fefcf8;
        }

        /* Product List Item */
        .product-item {
            display: flex;
            align-items: center;
            padding: 0.85rem;
            border-radius: 1.25rem;
            transition: all 0.25s ease;
            cursor: pointer;
            border: 1px solid transparent;
        }

        .product-item:hover {
            background: #fffaf5;
            transform: translateX(5px);
            border-color: #ffedd5;
        }

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

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.96);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
        }

        .animate-fade-in-scale {
            animation: fadeInScale 0.4s ease-out forwards;
        }

        /* Loading Skeleton */
        .skeleton {
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* Custom Scrollbar */
        .overflow-x-auto::-webkit-scrollbar {
            height: 5px;
        }

        .overflow-x-auto::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }

        .overflow-x-auto::-webkit-scrollbar-thumb {
            background: #fdba74;
            border-radius: 10px;
        }

        .overflow-x-auto::-webkit-scrollbar-thumb:hover {
            background: #f97316;
        }

        /* Chart Container Enhancements */
        canvas {
            max-height: 260px;
            width: 100% !important;
        }

        /* Additional Stats Cards */
        .stat-today-card {
            background: #fefcf8;
            border-radius: 1.25rem;
            transition: all 0.2s ease;
            border: 1px solid #fff3e6;
        }

        .stat-today-card:hover {
            background: white;
            border-color: #fed7aa;
            transform: translateY(-2px);
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {

            .stat-card,
            .glass-card,
            .welcome-card {
                padding: 1.25rem;
            }

            .stat-icon {
                width: 2.5rem;
                height: 2.5rem;
            }

            .quick-action {
                padding: 0.85rem 1rem;
            }
        }
    </style>
    @endpush

    {{-- MAIN CONTENT - Padding SAMA PERSIS dengan halaman Pesanan Saya --}}
    <div class="py-6 lg:py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Welcome Section -->
            <div class="welcome-card mb-8 animate-fade-in-up">
                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 relative z-10">
                    <div>
                        <h1 class="text-2xl lg:text-3xl font-bold mb-2 text-slate-800">
                            Selamat Datang, {{ auth()->user()->name }}! ✨
                        </h1>
                        <p class="text-amber-800/70 text-sm lg:text-base">
                            Kelola bisnis Anda dengan lebih mudah dan efisien
                        </p>
                    </div>
                    <div class="flex items-center gap-2 px-4 py-2 bg-white/60 rounded-full backdrop-blur-sm border border-white/40 shadow-sm">
                        <i class="fas fa-chart-line text-amber-600 text-sm"></i>
                        <span class="text-amber-800 text-sm font-semibold">Admin Dashboard</span>
                    </div>
                </div>
            </div>

            <!-- Statistics Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6 mb-8">
                <!-- Total Sales -->
                <div class="stat-card animate-fade-in-up" style="animation-delay: 0.05s">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1">
                                <i class="fas fa-chart-line text-xs"></i> Total Penjualan
                            </p>
                            @if(isset($totalSales))
                            <p class="text-2xl lg:text-3xl font-extrabold text-slate-800">
                                Rp {{ number_format($totalSales, 0, ',', '.') }}
                            </p>
                            @else
                            <div class="h-8 w-32 skeleton rounded"></div>
                            @endif
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-chart-line text-xl"></i>
                        </div>
                    </div>
                </div>

                <!-- Total Orders -->
                <div class="stat-card animate-fade-in-up" style="animation-delay: 0.1s">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1">
                                <i class="fas fa-shopping-cart text-xs"></i> Total Pesanan
                            </p>
                            @if(isset($totalOrders))
                            <p class="text-2xl lg:text-3xl font-extrabold text-slate-800">
                                {{ number_format($totalOrders) }}
                            </p>
                            @else
                            <div class="h-8 w-20 skeleton rounded"></div>
                            @endif
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-shopping-cart text-xl"></i>
                        </div>
                    </div>
                </div>

                <!-- Total Products -->
                <div class="stat-card animate-fade-in-up" style="animation-delay: 0.15s">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1">
                                <i class="fas fa-box text-xs"></i> Total Produk
                            </p>
                            @if(isset($totalProducts))
                            <p class="text-2xl lg:text-3xl font-extrabold text-slate-800">
                                {{ number_format($totalProducts) }}
                            </p>
                            @else
                            <div class="h-8 w-20 skeleton rounded"></div>
                            @endif
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-box text-xl"></i>
                        </div>
                    </div>
                </div>

                <!-- Laporan -->
                <a href="{{ route('admin.report.index') }}" class="stat-card animate-fade-in-up block group" style="animation-delay: 0.2s; cursor: pointer;">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1">
                                <i class="fas fa-file-alt text-xs"></i> Laporan
                            </p>
                            <p class="text-lg font-bold text-amber-600 group-hover:text-amber-700 transition-colors">
                                Lihat Laporan
                            </p>
                            <p class="text-xs text-slate-400 mt-1">Penjualan &amp; rekap data</p>
                        </div>
                        <div class="stat-icon group-hover:bg-amber-100 transition-colors">
                            <i class="fas fa-chart-bar text-xl"></i>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Charts Row -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <!-- Monthly Sales Chart -->
                <div class="glass-card animate-fade-in-up animate-fade-in-scale" style="animation-delay: 0.2s">
                    <div class="flex items-center gap-3 mb-5">
                        <div class="w-9 h-9 bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl flex items-center justify-center shadow-sm">
                            <i class="fas fa-chart-line text-amber-600 text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-800">Penjualan per Bulan</h3>
                            <p class="text-xs text-slate-400 mt-0.5">Trend penjualan 6 bulan terakhir</p>
                        </div>
                    </div>
                    <canvas id="salesChart" height="250"></canvas>
                </div>

                <!-- Order Status Chart -->
                <div class="glass-card animate-fade-in-up animate-fade-in-scale" style="animation-delay: 0.25s">
                    <div class="flex items-center gap-3 mb-5">
                        <div class="w-9 h-9 bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl flex items-center justify-center shadow-sm">
                            <i class="fas fa-chart-pie text-amber-600 text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-800">Status Pesanan</h3>
                            <p class="text-xs text-slate-400 mt-0.5">Distribusi status pesanan</p>
                        </div>
                    </div>
                    <canvas id="statusChart" height="250"></canvas>
                </div>
            </div>

            <!-- Today Stats - Full Width -->
            <div class="glass-card animate-fade-in-up" style="animation-delay: 0.4s">
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-9 h-9 bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl flex items-center justify-center shadow-sm">
                        <i class="fas fa-chart-simple text-amber-600 text-sm"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-slate-800">Statistik Hari Ini</h3>
                        <p class="text-xs text-slate-400 mt-0.5">Update real-time</p>
                    </div>
                </div>
                <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="stat-today-card p-4">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs font-bold text-slate-500">Pesanan Baru</span>
                            <i class="fas fa-clock text-amber-500 text-sm"></i>
                        </div>
                        <p class="text-xl font-black text-slate-800">
                            {{ $newOrdersToday ?? 0 }} Pesanan
                        </p>
                    </div>
                    <div class="stat-today-card p-4">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs font-bold text-slate-500">Total Kategori</span>
                            <i class="fas fa-tags text-amber-500 text-sm"></i>
                        </div>
                        <p class="text-xl font-black text-slate-800">
                            {{ \App\Models\Category::count() }}
                        </p>
                    </div>
                    <div class="stat-today-card p-4 {{ ($lowStockProducts ?? 0) > 0 ? 'bg-gradient-to-br from-red-50 to-amber-50 border-red-100' : '' }}">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs font-bold {{ ($lowStockProducts ?? 0) > 0 ? 'text-red-500' : 'text-slate-500' }}">Stok Hampir Habis</span>
                            <i class="fas fa-exclamation-triangle text-sm {{ ($lowStockProducts ?? 0) > 0 ? 'text-red-500' : 'text-amber-500' }}"></i>
                        </div>
                        <div class="flex items-end justify-between">
                            <p class="text-xl font-black {{ ($lowStockProducts ?? 0) > 0 ? 'text-red-700' : 'text-slate-800' }}">
                                {{ $lowStockProducts ?? 0 }} Produk
                            </p>
                            @if(($lowStockProducts ?? 0) > 0)
                            <a href="{{ route('admin.product.index') }}" class="text-xs px-2 py-1 bg-white text-red-600 rounded-lg hover:bg-red-50 transition font-semibold shadow-sm border border-red-100">
                                Restock
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Sales Chart
            const salesCtx = document.getElementById('salesChart');
            if (salesCtx) {
                new Chart(salesCtx, {
                    type: 'line',
                    data: {
                        labels: @json($chartMonths ?? []),
                        datasets: [{
                            label: 'Penjualan',
                            data: @json($chartSales ?? []),
                            borderColor: '#f97316',
                            backgroundColor: 'rgba(249, 115, 22, 0.04)',
                            borderWidth: 2.5,
                            tension: 0.3,
                            fill: true,
                            pointBackgroundColor: '#f97316',
                            pointBorderColor: '#ffffff',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            pointHoverRadius: 7,
                            pointShadow: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                backgroundColor: '#ffffff',
                                titleColor: '#1e293b',
                                bodyColor: '#475569',
                                borderColor: '#f97316',
                                borderWidth: 1,
                                padding: 10,
                                cornerRadius: 12,
                                displayColors: false,
                                callbacks: {
                                    label: function(context) {
                                        return 'Rp ' + context.raw.toLocaleString('id-ID');
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                grid: {
                                    color: '#f1f5f9',
                                    drawBorder: false
                                },
                                ticks: {
                                    callback: function(value) {
                                        return 'Rp ' + value.toLocaleString('id-ID');
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }

            // Status Chart
            const statusCtx = document.getElementById('statusChart');
            if (statusCtx && @json($orderStatus)) {
                new Chart(statusCtx, {
                    type: 'doughnut',
                    data: {
                        labels: @json(array_keys($orderStatus->toArray())),
                        datasets: [{
                            data: @json(array_values($orderStatus->toArray())),
                            backgroundColor: [
                                '#f59e0b',
                                '#3b82f6',
                                '#10b981',
                                '#ef4444',
                                '#8b5cf6'
                            ],
                            borderWidth: 0,
                            hoverOffset: 8,
                            cutout: '65%'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    boxWidth: 10,
                                    padding: 12,
                                    font: {
                                        size: 11,
                                        weight: 'bold'
                                    },
                                    usePointStyle: true,
                                    pointStyle: 'circle'
                                }
                            },
                            tooltip: {
                                backgroundColor: '#ffffff',
                                titleColor: '#1e293b',
                                bodyColor: '#475569',
                                borderColor: '#f97316',
                                borderWidth: 1,
                                padding: 10,
                                cornerRadius: 12
                            }
                        }
                    }
                });
            }
        });
    </script>
    @endpush
</x-app-layout>