@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="row">
    <div class="col-md-3"><div class="info-box bg-primary"><span class="info-box-icon"><i class="fas fa-tools"></i></span>
        <div class="info-box-content"><span class="info-box-text">إجمالي التركيبات</span>
            <span class="info-box-number">{{ number_format($report['total']) }}</span></div></div></div>
    <div class="col-md-3"><div class="info-box bg-warning"><span class="info-box-icon"><i class="fas fa-star"></i></span>
        <div class="info-box-content"><span class="info-box-text">متوسط التقييم</span>
            <span class="info-box-number">{{ $report['avg_rating'] ?: '—' }}</span></div></div></div>
</div>

<div class="row">
    <div class="col-md-6"><div class="card"><div class="card-header"><h3 class="card-title">حسب الحالة</h3></div>
        <div class="card-body"><canvas id="statusChart" height="160"></canvas></div></div></div>
    <div class="col-md-6"><div class="card"><div class="card-header"><h3 class="card-title">أداء الفرق</h3></div>
        <div class="card-body">
            <table class="table table-sm">
                <thead class="bg-light"><tr>
                    <th>الفريق</th><th>إجمالي</th><th>مكتمل</th><th>متوسط التقييم</th>
                </tr></thead>
                <tbody>
                    @foreach($teamPerformance as $t)
                        <tr>
                            <td><b>{{ $t->name }}</b></td>
                            <td>{{ $t->orders_count }}</td>
                            <td class="text-success">{{ $t->completed_count }}</td>
                            <td>{{ $t->avg_rating ? round((float) $t->avg_rating, 1) . ' / 5' : '—' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div></div></div>
</div>
@endsection

@push('scripts')
<script>
const data = @json($report['rows']);
new Chart(document.getElementById('statusChart'), {
    type: 'pie',
    data: {
        labels: data.map(r => r.status),
        datasets: [{ data: data.map(r => r.count),
            backgroundColor: ['#17a2b8','#ffc107','#28a745','#6c757d','#dc3545'] }]
    }
});
</script>
@endpush