@extends('admin.layouts.app')

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

@section('content')

{{-- Stat Cards --}}
<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-icon">📦</div>
        <div class="stat-label">Total Products</div>
        <div class="stat-value">{{ $totalProducts }}</div>
        <div class="stat-sub">{{ $lowStock }} low stock</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">🏷️</div>
        <div class="stat-label">Categories</div>
        <div class="stat-value">{{ $totalCategories }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">👥</div>
        <div class="stat-label">Total Users</div>
        <div class="stat-value">{{ $totalUsers }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">💰</div>
        <div class="stat-label">Total Revenue</div>
        <div class="stat-value">RM {{ number_format($totalRevenue, 2) }}</div>
        <div class="stat-sub">{{ $totalOrders }} orders</div>
    </div>
</div>

{{-- Alert Popup Modal --}}
@if($expired > 0 || $expiringSoon > 0 || $lowStock > 0)
<div id="alert-overlay" style="position:fixed; inset:0; background:rgba(0,0,0,0.5);
     z-index:1000; display:flex; align-items:center; justify-content:center;
     backdrop-filter:blur(3px);">
    <div style="background:white; border-radius:20px; padding:32px; width:100%;
                max-width:460px; box-shadow:0 20px 60px rgba(0,0,0,0.2); position:relative;">

        {{-- Header --}}
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:24px;">
            <div style="background:#FEF3C7; width:48px; height:48px; border-radius:12px;
                        display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0;">
                ⚠️
            </div>
            <div>
                <div style="font-size:18px; font-weight:800; color:#1a1a1a;">Action Required</div>
                <div style="font-size:13px; color:#888; margin-top:2px;">Please review the following alerts</div>
            </div>
            <button onclick="closeAlertPopup()"
                style="position:absolute; top:16px; right:16px; background:#f0f0f0;
                       border:none; width:32px; height:32px; border-radius:50%;
                       cursor:pointer; font-size:14px; display:flex;
                       align-items:center; justify-content:center;">✕</button>
        </div>

        {{-- Alert Items --}}
        <div style="display:flex; flex-direction:column; gap:10px; margin-bottom:24px;">

            @if($expired > 0)
            <div style="background:#FEF2F2; border:1.5px solid #FECACA; border-radius:12px; padding:14px 16px;
                        display:flex; align-items:center; gap:12px;">
                <span style="font-size:20px;">🚨</span>
                <div>
                    <div style="font-size:13px; font-weight:800; color:#991B1B;">{{ $expired }} product(s) EXPIRED</div>
                    <div style="font-size:12px; color:#B91C1C; margin-top:2px;">Remove or replace these items immediately</div>
                </div>
            </div>
            @endif

            @if($expiringSoon > 0)
            <div style="background:#FFFBEB; border:1.5px solid #FDE68A; border-radius:12px; padding:14px 16px;
                        display:flex; align-items:center; gap:12px;">
                <span style="font-size:20px;">🕐</span>
                <div>
                    <div style="font-size:13px; font-weight:800; color:#92400E;">{{ $expiringSoon }} product(s) expiring within 7 days</div>
                    <div style="font-size:12px; color:#B45309; margin-top:2px;">Check inventory and plan promotions</div>
                </div>
            </div>
            @endif

            @if($lowStock > 0)
            <div style="background:#FFFBEB; border:1.5px solid #FDE68A; border-radius:12px; padding:14px 16px;
                        display:flex; align-items:center; gap:12px;">
                <span style="font-size:20px;">📉</span>
                <div>
                    <div style="font-size:13px; font-weight:800; color:#92400E;">{{ $lowStock }} product(s) low stock (≤ 3)</div>
                    <div style="font-size:12px; color:#B45309; margin-top:2px;">Restock soon to avoid running out</div>
                </div>
            </div>
            @endif

        </div>

        {{-- Actions --}}
        <div style="display:flex; gap:10px;">
            <a href="{{ route('admin.inventory') }}"
               style="flex:1; padding:12px; background:#C0392B; color:white;
                      border-radius:10px; font-size:14px; font-weight:800;
                      text-decoration:none; text-align:center;
                      transition:background 0.2s;"
               onmouseover="this.style.background='#a93226'"
               onmouseout="this.style.background='#C0392B'">
                🗄️ View Inventory
            </a>
            <button onclick="closeAlertPopup()"
                style="padding:12px 20px; background:#f0f0f0; color:#333;
                       border:none; border-radius:10px; font-size:14px;
                       font-weight:700; cursor:pointer; transition:background 0.2s;"
                onmouseover="this.style.background='#e0e0e0'"
                onmouseout="this.style.background='#f0f0f0'">
                Dismiss
            </button>
        </div>

    </div>
</div>
@endif

<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">

 {{-- Monthly Sales Chart --}}
<div class="admin-card">
    <div class="admin-card-title" style="font-size: 16px; font-weight: bold; margin-bottom: 15px;">
        📈 Monthly Sales ({{ now()->year }})
    </div>

    @php
        // Sediakan susunan data bulan 1-12
        $salesData = array_fill(1, 12, 0);
        foreach ($monthlySales as $sale) {
            $salesData[(int)$sale->month] = (float)$sale->total;
        }
    @endphp

    {{-- Kawasan Graf (Canvas) --}}
    <div style="position: relative; width: 100%; height: 220px;">
        <canvas id="liveSalesChart"></canvas>
    </div>
</div>

{{-- Sila pastikan CDN Chart.js ini diletakkan, atau pastikan ia dipanggil di layout app anda --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Ambil data jualan dari PHP Blade ke JavaScript
    const salesData = @json(array_values($salesData));
    const ctx = document.getElementById('liveSalesChart').getContext('2d');

    // Buat Live Chart baru
    const liveSalesChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Total Sales (RM)',
                data: salesData,
                backgroundColor: '#C0392B', // Warna merah tema anda
                borderColor: '#A93226',
                borderWidth: 1,
                borderRadius: 5, // Buat bucu bar melengkung sikit (Kemas!)
                borderSkipped: false,
                barPercentage: 0.6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: {
                duration: 1000, // Animasi bar naik selama 1 saat semasa load
                easing: 'easeOutQuart'
            },
            plugins: {
                legend: {
                    display: false // Sorok legend sebab tajuk dah ada
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return ' RM ' + context.raw.toFixed(2);
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)' // Garisan grid halus di belakang
                    },
                    ticks: {
                        font: { size: 11 },
                        callback: function(value) { return 'RM ' + value; }
                    }
                },
                x: {
                    grid: { display: false }, // Padam garisan menegak supaya bersih
                    ticks: { font: { size: 12, weight: '500' } }
                }
            }
        }
    });

    // OPTIONAL: Fungsi jika anda mahu "Simulasi" live update tanpa refresh
    // Anda boleh panggil fungsi ini sekiranya menggunakan AJAX/Websocket nanti
    window.updateChartLive = function(monthIndex, newAmount) {
        liveSalesChart.data.datasets[0].data[monthIndex] = newAmount;
        liveSalesChart.update(); // Graf akan naik secara live dengan animasi!
    };
});
</script>
    {{-- Recent Orders --}}
    <div class="admin-card">
        <div class="admin-card-title">🧾 Recent Orders</div>
        @if($recentOrders->isEmpty())
            <p style="color:#888; font-size:13px;">No orders yet.</p>
        @else
        <table class="admin-table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Total</th>
                    <th>Status</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentOrders as $order)
                <tr>
                    <td>{{ $order->user->name }}</td>
                    <td>RM {{ number_format($order->total, 2) }}</td>
                    <td><span class="badge badge-green">{{ $order->status }}</span></td>
                    <td style="color:#888; font-size:12px;">{{ $order->created_at->format('d M Y') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>

</div>

{{-- Quick Actions --}}
<div class="admin-card">
    <div class="admin-card-title">⚡ Quick Actions</div>
    <div style="display:flex; gap:12px; flex-wrap:wrap;">
        <a href="{{ route('admin.products.create') }}" class="admin-btn admin-btn-primary">+ Add Product</a>
        <a href="{{ route('admin.categories.index') }}" class="admin-btn admin-btn-gray">+ Add Category</a>
        <a href="{{ route('admin.inventory') }}" class="admin-btn admin-btn-gray">🗄️ Inventory</a>
        <a href="{{ route('admin.revenue') }}" class="admin-btn admin-btn-gray">💰 Revenue Report</a>
        <a href="{{ route('admin.users.index') }}" class="admin-btn admin-btn-gray">👥 View Users</a>

        
    </div>
</div>

@endsection

@push('scripts')
<script>
function closeAlertPopup() {
    const overlay = document.getElementById('alert-overlay');
    if (overlay) {
        overlay.style.opacity = '0';
        overlay.style.transition = 'opacity 0.3s';
        setTimeout(() => overlay.remove(), 300);
    }
}
</script>
@endpush