@extends('admin.layouts.app')
@section('title', 'Dashboard')

@section('content')
<div class="row g-3 mb-4">
    @php
        $cards = [
            ['label' => 'Total Orders', 'value' => number_format($stats['orders_total']), 'icon' => 'bi-receipt', 'bg' => 'primary'],
            ['label' => 'Pending Orders', 'value' => number_format($stats['orders_pending']), 'icon' => 'bi-hourglass-split', 'bg' => 'warning'],
            ['label' => 'Revenue (delivered)', 'value' => money($stats['revenue']), 'icon' => 'bi-cash-stack', 'bg' => 'success'],
            ['label' => 'Profit (delivered)', 'value' => money($stats['profit']), 'icon' => 'bi-graph-up-arrow', 'bg' => 'info'],
        ];
    @endphp
    @foreach($cards as $c)
        <div class="col-6 col-xl-3">
            <div class="card stat-card">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="icon bg-{{ $c['bg'] }}-subtle text-{{ $c['bg'] }}"><i class="bi {{ $c['icon'] }}"></i></div>
                    <div>
                        <div class="fs-5 fw-bold">{{ $c['value'] }}</div>
                        <div class="small text-muted">{{ $c['label'] }}</div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-3 mb-4">
    <div class="col-6 col-md-3"><div class="card"><div class="card-body text-center py-3"><div class="fw-bold fs-5">{{ $stats['customers'] }}</div><div class="small text-muted">Customers</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card"><div class="card-body text-center py-3"><div class="fw-bold fs-5">{{ $stats['products'] }}</div><div class="small text-muted">Products</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card"><div class="card-body text-center py-3"><div class="fw-bold fs-5 text-warning">{{ $stats['low_stock'] }}</div><div class="small text-muted">Low Stock</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card"><div class="card-body text-center py-3"><div class="fw-bold fs-5 text-danger">{{ $stats['out_of_stock'] }}</div><div class="small text-muted">Out of Stock</div></div></div></div>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header bg-white fw-semibold">Sales — last 14 days</div>
            <div class="card-body"><canvas id="salesChart" height="110"></canvas></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header bg-white fw-semibold">Low Stock Alert</div>
            <div class="list-group list-group-flush">
                @forelse($lowStockProducts as $p)
                    <a href="{{ route('admin.products.edit', $p) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <span class="small text-truncate" style="max-width:180px">{{ $p->name }}</span>
                        <span class="badge bg-{{ $p->stock_qty <= 0 ? 'danger' : 'warning' }}">{{ $p->stock_qty }}</span>
                    </a>
                @empty
                    <div class="list-group-item text-muted small">All good — no low stock.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header bg-white fw-semibold d-flex justify-content-between">
        <span>Recent Orders</span>
        <a href="{{ route('admin.orders.index') }}" class="small">View all</a>
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light"><tr><th>Order</th><th>Customer</th><th>Total</th><th>Payment</th><th>Status</th><th>Date</th></tr></thead>
            <tbody>
                @forelse($recentOrders as $o)
                    <tr onclick="window.location='{{ route('admin.orders.show', $o) }}'" style="cursor:pointer">
                        <td class="fw-semibold">{{ $o->order_number }}</td>
                        <td class="small">{{ $o->customer_name }}<br><span class="text-muted">{{ $o->customer_phone }}</span></td>
                        <td>{{ money($o->total) }}</td>
                        <td><span class="text-uppercase small">{{ $o->payment_method }}</span></td>
                        <td><span class="badge bg-{{ $o->statusColor() }}">{{ $o->statusLabel() }}</span></td>
                        <td class="small text-muted">{{ $o->created_at->format('d M, H:i') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-muted py-4">No orders yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
    new Chart(document.getElementById('salesChart'), {
        type: 'line',
        data: {
            labels: @json($chart['labels']),
            datasets: [
                { label: 'Revenue (৳)', data: @json($chart['revenue']), borderColor: '{{ settings('theme_color', '#e63946') }}', backgroundColor: 'rgba(230,57,70,.1)', fill: true, tension: .35, yAxisID: 'y' },
                { label: 'Orders', data: @json($chart['orders']), borderColor: '#1d3557', tension: .35, yAxisID: 'y1' }
            ]
        },
        options: {
            responsive: true, interaction: { mode: 'index', intersect: false },
            scales: { y: { beginAtZero: true, position: 'left' }, y1: { beginAtZero: true, position: 'right', grid: { drawOnChartArea: false } } }
        }
    });
</script>
@endpush