@extends('layouts.app')
@section('title', __('ui.dashboard'))

@section('content')
<div class="mb-3">
    <h4 class="mb-0">{{ __('ui.welcome') }}, {{ auth()->user()->name }}</h4>
    <div class="text-muted">{{ __('ui.overview') }}</div>
</div>

<div class="row g-3 mb-3">
    @foreach ($totals as [$key, $val, $icon, $color])
        <div class="col-6 col-xl-3">
            <div class="card stat"><div class="card-body d-flex align-items-center gap-3">
                <div class="icon bg-{{ $color }} bg-opacity-10 text-{{ $color }}"><i class="bi {{ $icon }}"></i></div>
                <div>
                    <div class="text-muted small">{{ __('ui.'.$key) }}</div>
                    <div class="fs-5 fw-bold">{{ \App\Models\Setting::get('currency','৳') }} {{ number_format($val, 2) }}</div>
                </div>
            </div></div>
        </div>
    @endforeach
</div>

<div class="row g-3 mb-3">
    @foreach ($cards as [$key, $val, $icon, $color])
        <div class="col-6 col-xl-3">
            <div class="card stat"><div class="card-body d-flex align-items-center gap-3">
                <div class="icon bg-{{ $color }} bg-opacity-10 text-{{ $color }}"><i class="bi {{ $icon }}"></i></div>
                <div>
                    <div class="text-muted small">{{ __('ui.'.$key) }}</div>
                    <div class="fs-5 fw-bold">{{ number_format($val) }}</div>
                </div>
            </div></div>
        </div>
    @endforeach
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <div class="card h-100"><div class="card-body">
            <h6 class="mb-3">{{ __('ui.sales_vs_purchase') }}</h6>
            <canvas id="chart" height="130"></canvas>
        </div></div>
    </div>
    <div class="col-lg-5">
        <div class="card h-100"><div class="card-body">
            <h6 class="mb-3">{{ __('ui.recent') }}</h6>
            @forelse ($recent as $r)
                <a class="d-flex justify-content-between text-decoration-none text-body py-2 border-bottom"
                   href="{{ $r['slug'] ? route('module', $r['slug']) : '#' }}">
                    <span><span class="fw-semibold">{{ $r['title'] }}</span><br><small class="text-muted">{{ $r['label'] }} · {{ $r['date'] }}</small></span>
                    <span class="text-end">{{ $r['amount'] !== null ? number_format($r['amount'], 2) : '' }}</span>
                </a>
            @empty
                <div class="text-muted">{{ __('ui.no_data') }}</div>
            @endforelse
        </div></div>
    </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('chart'), {
    type: 'bar',
    data: {
        labels: @json($labels),
        datasets: [
            { label: @json(__('ui.sales')),    data: @json($sales),    backgroundColor: '#198754' },
            { label: @json(__('ui.purchase')), data: @json($purchase), backgroundColor: '#dc3545' },
        ],
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true } } },
});
</script>
@endpush