@extends('admin.layouts.app')
@section('title', 'Dashboard')
@section('content')
    <div class="grid-4" style="margin-bottom:24px;">
        @php
            $cards = [
                ['label' => "Today's Sales", 'value' => $siteSettings['currency'].number_format($stats['today_sales'],2), 'icon' => 'fa-sack-dollar'],
                ['label' => 'Monthly Sales', 'value' => $siteSettings['currency'].number_format($stats['monthly_sales'],2), 'icon' => 'fa-chart-line'],
                ['label' => 'Total Products', 'value' => $stats['total_products'], 'icon' => 'fa-bowl-food'],
                ['label' => 'Low Stock', 'value' => $stats['low_stock'], 'icon' => 'fa-triangle-exclamation'],
                ['label' => 'Out of Stock', 'value' => $stats['out_of_stock'], 'icon' => 'fa-ban'],
                ['label' => 'Active Offers', 'value' => $stats['active_offers'], 'icon' => 'fa-percent'],
                ['label' => 'Active Promo Codes', 'value' => $stats['active_promo_codes'], 'icon' => 'fa-ticket'],
                ['label' => 'Est. Profit (mo.)', 'value' => $siteSettings['currency'].number_format($stats['estimated_profit'],2), 'icon' => 'fa-piggy-bank'],
            ];
        @endphp
        @foreach($cards as $c)
            <div class="card hover-lift stat-card">
                <div class="stat-icon"><i class="fa-solid {{ $c['icon'] }}"></i></div>
                <div>
                    <div class="stat-value">{{ $c['value'] }}</div>
                    <div class="stat-label">{{ $c['label'] }}</div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="grid-2" style="margin-bottom:24px;">
        <div class="card">
            <h3 style="margin-bottom:16px;">Sales — Last 7 Days</h3>
            <canvas id="salesChart" height="180"></canvas>
        </div>
        <div class="card">
            <h3 style="margin-bottom:16px;">Low Stock Alert</h3>
            @forelse($lowStockProducts as $p)
                <div style="display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(0,0,0,0.05);">
                    <span>{{ $p->name }}</span>
                    <span class="badge {{ $p->stock_quantity <= 0 ? 'badge-red' : 'badge-yellow' }}">{{ $p->stock_quantity }} left</span>
                </div>
            @empty
                <p style="opacity:0.6;">All products are well stocked.</p>
            @endforelse
        </div>
    </div>

    <div class="grid-2">
        <div class="card">
            <h3 style="margin-bottom:16px;">Recent Products</h3>
            @foreach($recentProducts as $p)
                <div style="padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.05); display:flex; justify-content:space-between;">
                    <span>{{ $p->name }}</span>
                    <span style="opacity:0.6; font-size:0.8rem;">{{ $p->created_at->diffForHumans() }}</span>
                </div>
            @endforeach
        </div>
        <div class="card">
            <h3 style="margin-bottom:16px;">Recent Stock Changes</h3>
            @foreach($recentStock as $s)
                <div style="padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.05); display:flex; justify-content:space-between;">
                    <span>{{ $s->product->name ?? '—' }}</span>
                    <span class="badge {{ $s->quantity_changed >= 0 ? 'badge-green' : 'badge-red' }}">{{ $s->quantity_changed >= 0 ? '+' : '' }}{{ $s->quantity_changed }}</span>
                </div>
            @endforeach
        </div>
    </div>
@endsection
@push('scripts')
<script>
    new Chart(document.getElementById('salesChart'), {
        type: 'line',
        data: {
            labels: {!! json_encode($salesLast7Days->pluck('label')) !!},
            datasets: [{
                label: 'Sales',
                data: {!! json_encode($salesLast7Days->pluck('value')) !!},
                borderColor: getComputedStyle(document.documentElement).getPropertyValue('--primary'),
                backgroundColor: 'rgba(31,157,85,0.12)',
                tension: 0.4, fill: true, borderWidth: 3, pointRadius: 4,
            }]
        },
        options: { responsive: true, plugins: { legend: { display: false } }, animation: { duration: 800 } }
    });
</script>
@endpush