@extends('layouts.app')
@section('title','گزارش پایپ‌لاین')
@section('content')
<div class="flex justify-between mb-4">
  <h1 class="text-xl font-bold">گزارش پایپ‌لاین</h1>
  <a href="{{ route('reports.index') }}" class="text-sm text-blue-600">بازگشت</a>
</div>
<div class="bg-white rounded-lg shadow p-4 mb-6">
  <canvas id="pipelineChart" height="120"></canvas>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-gray-50 border-b"><tr><th class="text-right p-3">وضعیت</th><th class="text-right p-3">تعداد</th></tr></thead>
<tbody>
@foreach($rows as $row)
<tr class="border-b"><td class="p-3">{{ $row['label'] }}</td><td class="p-3 font-medium">{{ $row['count'] }}</td></tr>
@endforeach
</tbody></table></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = @json(collect($rows)->pluck('label'));
const data = @json(collect($rows)->pluck('count'));
new Chart(document.getElementById('pipelineChart'), {
  type: 'bar',
  data: { labels, datasets: [{ label: 'تعداد پرونده', data, backgroundColor: '#3b82f6' }] },
  options: { responsive: true, plugins: { legend: { display: false } } }
});
</script>
@endsection