@extends('admin.layouts.master')
@section('title', 'ربحية أنواع الطباعة')

@section('page-header')
@include('admin.reports._header', [
    'title' => 'ربحية أنواع الطباعة',
    'subtitle' => 'تحليل ربحية كل نوع (أوفست/ديجيتال/فلكس/تغليف) لتحديد الأولويات',
    'icon' => 'ti-chart-pie-2',
    'color' => 'warning',
])
@endsection

@section('content')
@include('admin.reports._filters', ['from'=>$from, 'to'=>$to, 'showCompare'=>false])

<div class="alert alert-info mb-3">
    <i class="ti ti-info-circle ms-1"></i>
    <strong>قيمة هذا التقرير:</strong>
    يحدد <strong>أي نوع طباعة</strong> هو الأكثر ربحية لتركيز الإمكانيات عليه، وأي نوع يحتاج لمراجعة التسعير أو خفض التكاليف.
</div>

<div class="row row-cards mb-3">
    <div class="col-md-4"><div class="card text-center"><div class="card-body">
        <i class="ti ti-cash fs-1 text-success"></i>
        <div class="text-muted">إجمالي الإيرادات</div>
        <h1>{{ number_format($totalRevenue, 0) }}</h1><small>ج.م</small>
    </div></div></div>
    <div class="col-md-4"><div class="card text-center"><div class="card-body">
        <i class="ti ti-trending-up fs-1 text-primary"></i>
        <div class="text-muted">صافي الربح</div>
        <h1 class="@if($totalProfit >= 0) text-success @else text-danger @endif">{{ number_format($totalProfit, 0) }}</h1><small>ج.م</small>
    </div></div></div>
    <div class="col-md-4"><div class="card text-center"><div class="card-body">
        <i class="ti ti-percentage fs-1 text-info"></i>
        <div class="text-muted">هامش الربح الإجمالي</div>
        <h1 class="@if($overallMargin >= 25) text-success @elseif($overallMargin >= 10) text-warning @else text-danger @endif">{{ $overallMargin }}%</h1>
    </div></div></div>
</div>

<div class="row row-cards mb-3">
    <div class="col-md-6">
        <div class="card h-100"><div class="card-header"><h3 class="card-title">توزيع الإيرادات</h3></div>
            <div class="card-body"><div id="revenueChart"></div></div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card h-100"><div class="card-header"><h3 class="card-title">مقارنة الربح vs التكلفة</h3></div>
            <div class="card-body"><div id="profitChart"></div></div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header"><h3 class="card-title">تفاصيل ربحية كل نوع طباعة</h3></div>
    <div class="table-responsive">
        <table class="table card-table table-vcenter">
            <thead><tr>
                <th>نوع الطباعة</th>
                <th class="text-center">الطلبات</th>
                <th class="text-center">الوحدات</th>
                <th class="text-end">الإيرادات</th>
                <th class="text-end">التكلفة</th>
                <th class="text-end">الربح</th>
                <th class="text-center">الهامش %</th>
                <th class="text-center">متوسط الطلب</th>
                <th class="text-center">% من إجمالي</th>
            </tr></thead>
            <tbody>
                @foreach($data as $row)
                <tr>
                    <td>
                        @php $icons=['offset'=>'ti-printer','digital'=>'ti-device-laptop','flex'=>'ti-photo','packaging'=>'ti-package']; @endphp
                        <strong><i class="ti {{ $icons[$row['type_key']] ?? 'ti-folder' }} ms-1"></i> {{ $row['type'] }}</strong>
                    </td>
                    <td class="text-center">{{ $row['orders_count'] }}</td>
                    <td class="text-center">{{ number_format($row['units']) }}</td>
                    <td class="text-end text-success fw-bold">{{ number_format($row['revenue'], 0) }}</td>
                    <td class="text-end">{{ number_format($row['cost'], 0) }}</td>
                    <td class="text-end fw-bold @if($row['profit'] >= 0) text-success @else text-danger @endif">{{ number_format($row['profit'], 0) }}</td>
                    <td class="text-center"><span class="badge bg-{{ $row['margin'] >= 25 ? 'success' : ($row['margin'] >= 10 ? 'warning' : 'danger') }}">{{ $row['margin'] }}%</span></td>
                    <td class="text-center">{{ number_format($row['avg_per_order']) }}</td>
                    <td>
                        @php $pct = $totalRevenue > 0 ? round($row['revenue']/$totalRevenue*100, 1) : 0; @endphp
                        <div class="d-flex align-items-center">
                            <div class="progress flex-grow-1 ms-2" style="height:8px"><div class="progress-bar bg-primary" style="width:{{ $pct }}%"></div></div>
                            <strong>{{ $pct }}%</strong>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="card mt-3"><div class="card-body">
    <h4>💡 توصيات إدارية</h4>
    @php
        $best = $data->sortByDesc('margin')->first();
        $worst = $data->where('margin', '<', 15)->sortBy('margin')->first();
    @endphp
    <ul>
        @if($best)
            <li class="text-success"><strong>أعلى ربحية:</strong> {{ $best['type'] }} بهامش {{ $best['margin'] }}% — ركّز الجهد التسويقي عليه.</li>
        @endif
        @if($worst)
            <li class="text-warning"><strong>الأقل ربحية:</strong> {{ $worst['type'] }} بهامش {{ $worst['margin'] }}% — راجع التسعير أو خفض التكلفة.</li>
        @endif
        @if($overallMargin < 20)
            <li class="text-danger"><strong>الهامش الكلي منخفض</strong> ({{ $overallMargin }}%) - فحص دقيق للتكاليف مطلوب.</li>
        @endif
    </ul>
</div></div>
@endsection

@push('scripts')
<script>
const data = @json($data->values());

new ApexCharts(document.querySelector('#revenueChart'), {
    chart: { type: 'donut', height: 320, fontFamily: 'Cairo' },
    series: data.map(d => d.revenue),
    labels: data.map(d => d.type),
    colors: ['#0d6efd', '#198754', '#ffc107', '#dc3545'],
    legend: { position: 'bottom', fontFamily: 'Cairo' },
    dataLabels: { formatter: v => Math.round(v) + '%' },
}).render();

new ApexCharts(document.querySelector('#profitChart'), {
    chart: { type: 'bar', height: 320, fontFamily: 'Cairo', stacked: false },
    series: [
        { name: 'الإيرادات', data: data.map(d => d.revenue) },
        { name: 'التكلفة', data: data.map(d => d.cost) },
        { name: 'الربح', data: data.map(d => d.profit) },
    ],
    xaxis: { categories: data.map(d => d.type) },
    colors: ['#0d6efd','#dc3545','#198754'],
    plotOptions: { bar: { columnWidth: '70%', borderRadius: 4 } },
    legend: { position: 'top', fontFamily: 'Cairo' },
}).render();
</script>
@endpush