@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-header"><h3 class="card-title">المبيعات لكل عميل ({{ $from->toDateString() }} → {{ $to->toDateString() }})</h3></div>
    <div class="card-body">
        <canvas id="customerChart" height="80"></canvas>
        <table class="table table-sm table-bordered mt-3">
            <thead class="bg-light"><tr>
                <th>الكود</th><th>العميل</th><th>عدد الفواتير</th>
                <th>الإجمالي</th><th>المحصّل</th><th>المتبقي</th>
            </tr></thead>
            <tbody>
                @foreach($report['rows'] as $r)
                    <tr>
                        <td><code>{{ $r->customer?->code }}</code></td>
                        <td>{{ $r->customer?->name_ar ?? '—' }}</td>
                        <td>{{ $r->invoice_count }}</td>
                        <td><b>{{ number_format((float) $r->total, 2) }}</b></td>
                        <td class="text-success">{{ number_format((float) $r->paid, 2) }}</td>
                        <td class="text-warning"><b>{{ number_format((float) $r->balance, 2) }}</b></td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-light"><tr>
                <th colspan="2">الإجمالي</th>
                <th>{{ $report['totals']['invoice_count'] }}</th>
                <th>{{ number_format($report['totals']['total'], 2) }}</th>
                <th>{{ number_format($report['totals']['paid'], 2) }}</th>
                <th>{{ number_format($report['totals']['balance'], 2) }}</th>
            </tr></tfoot>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    const top = @json($report['rows']->take(10)->map(fn ($r) => ['name' => $r->customer?->name_ar ?? '—', 'total' => (float) $r->total]));
    new Chart(document.getElementById('customerChart'), {
        type: 'bar',
        data: {
            labels: top.map(t => t.name),
            datasets: [{ label: 'الإجمالي', data: top.map(t => t.total), backgroundColor: '#17a2b8' }]
        },
        options: { responsive: true, indexAxis: 'y' }
    });
});
</script>
@endpush