@extends('admin.layouts.master')
@section('title', 'الأكثر دوراناً')
@section('page_title', 'تقرير المنتجات الأكثر دوراناً')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.reports.index') }}">{{ __('admin.reports') }}</a></li>
    <li class="breadcrumb-item active">الأكثر دوراناً</li>
@endsection

@section('content')
@include('admin.reports._filter', ['title' => 'الأكثر دوراناً'])

<div class="card"><div class="card-body">
    <canvas id="topChart" height="80"></canvas>
    <table class="table table-sm table-bordered mt-3">
        <thead class="bg-light"><tr><th>SKU</th><th>المنتج</th><th>كمية الخروج</th></tr></thead>
        <tbody>
            @foreach($rows as $r)
                <tr>
                    <td><code>{{ $r->product?->sku }}</code></td>
                    <td>{{ $r->product?->name_ar }}</td>
                    <td><b>{{ number_format((float) $r->outflow, 2) }}</b></td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div></div>
@endsection

@push('scripts')
<script>
const m = @json($rows->take(15)->map(fn ($r) => ['name' => $r->product?->name_ar ?? '—', 'qty' => (float) $r->outflow]));
new Chart(document.getElementById('topChart'), {
    type: 'bar',
    data: { labels: m.map(d => d.name), datasets: [{ label: 'الخروج', data: m.map(d => d.qty), backgroundColor: '#dc3545' }] },
    options: { indexAxis: 'y' }
});
</script>
@endpush