@extends('biz.layout')
@section('title', __('app.dash_title').' · '.__('app.app_name'))
@section('content')
@if($varianceAlert)
<div class="bg-red-600 text-white font-bold px-4 py-3 rounded-xl mb-4">{{ __('app.variance_alert') }}</div>
@endif
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
    <div class="bg-white rounded-2xl shadow p-5">
        <div class="text-gray-500 text-sm">{{ __('app.today_sales') }}</div>
        <div class="text-2xl font-bold mpesa">KSh {{ number_format($todaySales, 2) }}</div>
    </div>
    <div class="bg-white rounded-2xl shadow p-5">
        <div class="text-gray-500 text-sm">{{ __('app.cash_drawer') }}</div>
        <div class="text-2xl font-bold">KSh {{ number_format($expectedCash, 2) }}</div>
    </div>
    <div class="bg-white rounded-2xl shadow p-5">
        <div class="text-gray-500 text-sm">{{ __('app.mpesa_today') }}</div>
        <div class="text-2xl font-bold">KSh {{ number_format($mpesaToday, 2) }}</div>
    </div>
    <div class="bg-white rounded-2xl shadow p-5">
        <div class="text-gray-500 text-sm">{{ __('app.low_stock') }}</div>
        <div class="text-2xl font-bold {{ $lowStockCount > 0 ? 'text-red-600' : '' }}">{{ $lowStockCount }}</div>
    </div>
    <div class="bg-white rounded-2xl shadow p-5">
        <div class="text-gray-500 text-sm">{{ __('app.open_session') }}</div>
        <div class="text-lg font-bold">{{ $openSession?->cashier?->name ?? __('app.none') }}</div>
    </div>
</div>
<div class="bg-white rounded-2xl shadow p-5 mt-6">
    <h2 class="font-bold mb-3">{{ __('app.sales_7d') }}</h2>
    <canvas id="salesChart" height="90"></canvas>
</div>
<script>
const days = @json(collect($chart)->pluck('day'));
const sales = @json(collect($chart)->pluck('sales'));
new Chart(document.getElementById('salesChart'), {
    type: 'bar',
    data: { labels: days, datasets: [{ label: @json(__('app.sales_label')), data: sales, backgroundColor: '#00A651', borderRadius: 8 }] },
    options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});
</script>
@endsection