@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-success"><span class="info-box-icon"><i class="fas fa-coins"></i></span>
        <div class="info-box-content"><span class="info-box-text">إجمالي الإيراد</span>
            <span class="info-box-number">{{ number_format($report['totals']['total'], 2) }}</span></div></div></div>
    <div class="col-md-3"><div class="info-box bg-secondary"><span class="info-box-icon"><i class="fas fa-receipt"></i></span>
        <div class="info-box-content"><span class="info-box-text">التكلفة المقدّرة</span>
            <span class="info-box-number">{{ number_format($report['totals']['cost'], 2) }}</span></div></div></div>
    <div class="col-md-3"><div class="info-box bg-primary"><span class="info-box-icon"><i class="fas fa-chart-line"></i></span>
        <div class="info-box-content"><span class="info-box-text">الربح المقدّر</span>
            <span class="info-box-number">{{ number_format($report['totals']['profit'], 2) }}</span></div></div></div>
    <div class="col-md-3"><div class="info-box bg-info"><span class="info-box-icon"><i class="fas fa-cubes"></i></span>
        <div class="info-box-content"><span class="info-box-text">إجمالي الكميات</span>
            <span class="info-box-number">{{ number_format($report['totals']['quantity'], 2) }}</span></div></div></div>
</div>

<div class="card">
    <div class="card-header"><h3 class="card-title">أعلى 10 منتجات بيعاً</h3></div>
    <div class="card-body"><canvas id="productChart" height="100"></canvas></div>
</div>

<div class="card">
    <div class="card-header"><h3 class="card-title">تفاصيل</h3></div>
    <div class="card-body">
        <table class="table table-sm table-bordered">
            <thead class="bg-light"><tr>
                <th>SKU</th><th>المنتج</th><th>الكمية</th>
                <th>الإيراد</th><th>التكلفة</th><th>الربح</th><th>هامش %</th>
            </tr></thead>
            <tbody>
                @foreach($report['rows'] as $r)
                    @php $margin = $r->total > 0 ? round(($r->profit / $r->total) * 100, 1) : 0; @endphp
                    <tr>
                        <td><code>{{ $r->product?->sku }}</code></td>
                        <td>{{ $r->product?->name_ar ?? '—' }}</td>
                        <td>{{ number_format((float) $r->quantity, 2) }}</td>
                        <td>{{ number_format((float) $r->total, 2) }}</td>
                        <td>{{ number_format((float) $r->cost, 2) }}</td>
                        <td class="text-success"><b>{{ number_format((float) $r->profit, 2) }}</b></td>
                        <td><span class="badge badge-{{ $margin >= 30 ? 'success' : ($margin >= 10 ? 'warning' : 'danger') }}">{{ $margin }}%</span></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

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