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

@section('content')
<div class="row mb-4">
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="card stat-card p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-1">Total Sales</h6>
                    <h3 class="mb-0">${{ number_format($totalSales ?? 0, 2) }}</h3>
                </div>
                <div class="fs-1 text-primary"><i class="bi bi-currency-dollar"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="card stat-card orange p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-1">Today's Sales</h6>
                    <h3 class="mb-0">${{ number_format($todaySales ?? 0, 2) }}</h3>
                </div>
                <div class="fs-1 text-warning"><i class="bi bi-cart-check"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="card stat-card teal p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-1">Total Products</h6>
                    <h3 class="mb-0">{{ $totalProducts ?? 0 }}</h3>
                </div>
                <div class="fs-1 text-success"><i class="bi bi-box-seam"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 mb-3">
        <a href="{{ route('stock.low') }}" class="text-decoration-none">
            <div class="card stat-card red p-3 h-100">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Low Stock Alerts</h6>
                        <h3 class="mb-0 text-danger">{{ $lowStockProducts ?? 0 }}</h3>
                    </div>
                    <div class="fs-1 text-danger"><i class="bi bi-exclamation-triangle"></i></div>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-8 mb-4">
        <div class="card p-3">
            <h5 class="card-title">Sales Last 12 Months</h5>
            <canvas id="salesChart" height="100"></canvas>
        </div>
    </div>
    <div class="col-md-4 mb-4">
        <div class="card p-3">
            <h5 class="card-title">Recent Transactions</h5>
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Inv#</th>
                            <th>Amount</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentSales ?? [] as $sale)
                        <tr>
                            <td><a href="{{ route('sales.show', $sale->id) }}">{{ $sale->invoice_no }}</a></td>
                            <td>${{ number_format($sale->total, 2) }}</td>
                            <td><span class="badge bg-success">Paid</span></td>
                        </tr>
                        @empty
                        <tr><td colspan="3" class="text-center">No recent transactions</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    var ctx = document.getElementById('salesChart').getContext('2d');
    var salesChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($chartLabels ?? ['Jan','Feb','Mar']) !!},
            datasets: [{
                label: 'Sales ($)',
                data: {!! json_encode($chartData ?? [0,0,0]) !!},
                backgroundColor: '#e8751a',
                borderColor: '#1e3a5f',
                borderWidth: 1
            }]
        },
        options: { responsive: true, scales: { y: { beginAtZero: true } } }
    });
</script>
@endsection