@extends('layouts.app')
@section('title', __('dashboard.stats_product_sales_title'))
@section('page_heading', __('dashboard.stats_product_sales_title'))

@section('content')
@php
    $formattedStart = $startDate->format('Y-m-d');
    $formattedEnd   = $endDate->format('Y-m-d');
    $sorted         = collect($productSales)->sortByDesc('price')->values();
    $totalRevenue   = $sorted->sum('price');
    $totalQty       = $sorted->sum('quantity');
    $uniqueProducts = $sorted->count();
    $avgPrice       = $totalQty > 0 ? $totalRevenue / $totalQty : 0;
    $top5           = $sorted->take(5);
@endphp

@include('dashboard.statistics.partials.nav')

@include('dashboard.statistics.partials.filter', [
    'filterAction'   => route('dashboard.statistics.product_sales'),
    'range'          => $range,
    'formattedStart' => $formattedStart,
    'formattedEnd'   => $formattedEnd,
    'exportRoute'    => route('dashboard.statistics.product_sales.export', ['start_date'=>$formattedStart,'end_date'=>$formattedEnd,'range'=>$range,'category_id'=>$selectedCategoryId]),
    'exportXlsRoute' => route('dashboard.statistics.product_sales.export', ['start_date'=>$formattedStart,'end_date'=>$formattedEnd,'range'=>$range,'format'=>'xls','category_id'=>$selectedCategoryId]),
    'extraFields'    => new \Illuminate\Support\HtmlString('
        <select name="category_id" class="app-input app-select app-input--sm" style="min-width:160px">
            <option value="">'.__('dashboard.All Categories').'</option>
            '.collect($categories)->map(fn($c)=>'<option value="'.$c->id.'"'.($selectedCategoryId==$c->id?' selected':'').'>'.$c->name.'</option>')->implode('').'
        </select>
    '),
])

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-coins',      '#eff6ff','#2563eb', number_format($totalRevenue,2), 'إجمالي الإيراد (ج.م)',  $formattedStart.' — '.$formattedEnd],
        ['fa-solid fa-boxes-stacked','#f0fdf4','#16a34a', number_format($totalQty),      'إجمالي الكميات',        'وحدة مباعة'],
        ['fa-solid fa-tag',        '#faf5ff','#7c3aed', number_format($uniqueProducts), 'منتجات مختلفة',         'ضمن الفترة المحددة'],
        ['fa-solid fa-calculator', '#fffbeb','#d97706', number_format($avgPrice,2),     'متوسط سعر الوحدة',      'إيراد ÷ كمية'],
    ] as [$ic,$bg,$cl,$val,$lbl,$meta])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;box-shadow:var(--shadow-card)">
        <div style="width:40px;height:40px;border-radius:10px;background:{{ $bg }};color:{{ $cl }};display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:.75rem">
            <i class="{{ $ic }}"></i>
        </div>
        <div style="font-size:1.3rem;font-weight:900;color:var(--text-primary);line-height:1;margin-bottom:.2rem">{{ $val }}</div>
        <div style="font-size:.75rem;font-weight:800;color:var(--text-primary);margin-bottom:.1rem">{{ $lbl }}</div>
        <div style="font-size:.68rem;color:var(--text-muted)">{{ $meta }}</div>
    </div>
    @endforeach
</div>

@if($sorted->isEmpty())
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:3rem;text-align:center">
    @include('layouts.partials.index-empty-state',['icon'=>'fa-solid fa-boxes-stacked','title'=>'لا توجد مبيعات منتجات في هذه الفترة','message'=>''])
</div>
@else

{{-- Top 5 chart + breakdown --}}
<div style="display:grid;grid-template-columns:2fr 1fr;gap:1.25rem;margin-bottom:1.25rem">

    {{-- Chart --}}
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
        <div style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
            <div style="font-size:.875rem;font-weight:800;color:var(--text-primary)">
                <i class="fa-solid fa-chart-bar" style="color:var(--c-primary);margin-inline-end:.4rem"></i>أعلى 5 منتجات إيراداً
            </div>
        </div>
        <div style="padding:1.25rem">
            <div id="topChart" style="min-height:260px"></div>
        </div>
    </div>

    {{-- Top 5 list --}}
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
        <div style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
            <div style="font-size:.875rem;font-weight:800;color:var(--text-primary)">
                <i class="fa-solid fa-trophy" style="color:#d97706;margin-inline-end:.4rem"></i>المراكز الأولى
            </div>
        </div>
        @foreach($top5 as $i => $p)
        @php $pct = $totalRevenue > 0 ? ($p['price'] / $totalRevenue * 100) : 0; @endphp
        <div style="padding:.875rem 1.25rem;{{ !$loop->last ? 'border-bottom:1px solid var(--border-subtle)' : '' }}" onmouseover="this.style.background='var(--surface-50)'" onmouseout="this.style.background=''">
            <div style="display:flex;align-items:center;gap:.625rem;margin-bottom:.4rem">
                <div style="width:22px;height:22px;border-radius:999px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;
                    background:{{ $i===0?'#2563eb':($i===1?'#d97706':($i===2?'#ea580c':'var(--surface-200)')) }};
                    color:{{ $i<3?'#fff':'var(--text-muted)' }}">{{ $i+1 }}</div>
                <span style="font-size:.82rem;font-weight:800;color:var(--text-primary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $p['name'] }}</span>
                <span style="font-size:.78rem;font-weight:900;color:var(--c-primary);white-space:nowrap">{{ number_format($p['price'],2) }}</span>
            </div>
            <div style="height:4px;border-radius:999px;background:var(--border);overflow:hidden">
                <div style="height:100%;border-radius:inherit;width:{{ min($pct,100) }}%;background:linear-gradient(90deg,var(--c-primary),#38bdf8)"></div>
            </div>
        </div>
        @endforeach
    </div>
</div>

{{-- Full table --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-boxes-stacked" style="color:var(--c-primary)"></i>تفاصيل مبيعات المنتجات
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ $uniqueProducts }} منتج</span>
        </div>
        <div style="font-size:.75rem;font-weight:700;color:var(--text-muted)">{{ $formattedStart }} — {{ $formattedEnd }}</div>
    </div>
    <div style="overflow-x:auto">
        <style>.page-table tbody tr{border-bottom:1px solid var(--border-subtle);transition:background .12s}.page-table tbody tr:hover{background:var(--surface-50)}.page-th{padding:.65rem 1.1rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start;border-bottom:1px solid var(--border);white-space:nowrap}</style>
        <table class="page-table" style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['#','المنتج','التصنيف','الكمية المباعة','الإيراد (ج.م)','% من الإجمالي'] as $h)
                    <th class="page-th">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($sorted as $i => $p)
                @php $pct = $totalRevenue > 0 ? ($p['price'] / $totalRevenue * 100) : 0; @endphp
                <tr>
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-muted);font-size:.78rem">{{ $i+1 }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ $p['name'] }}</div>
                        @if($p['sku'])<div style="font-size:.7rem;color:var(--text-muted)">{{ $p['sku'] }}</div>@endif
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--surface-100);color:var(--text-secondary)">{{ $p['category'] }}</span>
                    </td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:var(--text-primary);text-align:center">{{ number_format($p['quantity']) }}</td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:#16a34a">{{ number_format($p['price'],2) }}</td>
                    <td style="padding:.875rem 1.25rem;min-width:130px">
                        <div style="display:flex;align-items:center;gap:.5rem">
                            <div style="flex:1;height:5px;border-radius:999px;background:var(--border);overflow:hidden">
                                <div style="height:100%;border-radius:inherit;width:{{ min($pct,100) }}%;background:linear-gradient(90deg,var(--c-primary),#38bdf8)"></div>
                            </div>
                            <span style="font-size:.72rem;font-weight:800;color:var(--text-muted);white-space:nowrap">{{ number_format($pct,1) }}%</span>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr style="background:var(--border-subtle);border-top:2px solid var(--border)">
                    <td colspan="3" style="padding:.75rem 1.25rem;font-size:.78rem;font-weight:800;color:var(--text-muted)">الإجمالي</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:var(--text-primary);text-align:center">{{ number_format($totalQty) }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:#16a34a">{{ number_format($totalRevenue,2) }}</td>
                    <td style="padding:.75rem 1.25rem;font-weight:900;color:var(--text-muted)">100%</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endif

@endsection

@section('scripts')
@if($top5->isNotEmpty())
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
new ApexCharts(document.querySelector('#topChart'), {
    series: [{ name: 'الإيراد', data: @json($top5->pluck('price')->map(fn($v)=>round($v,2))->values()) }],
    chart: { type: 'bar', height: 260, toolbar: { show: false }, fontFamily: 'inherit' },
    colors: ['#2563eb'],
    plotOptions: { bar: { borderRadius: 6, columnWidth: '45%', distributed: true } },
    dataLabels: { enabled: false },
    legend: { show: false },
    xaxis: {
        categories: @json($top5->pluck('name')->values()),
        labels: { style: { colors: '#94a3b8', fontSize: '11px' }, trim: true, maxHeight: 60 }
    },
    yaxis: { labels: { style: { colors: '#94a3b8', fontSize: '11px' }, formatter: v => Number(v).toLocaleString() } },
    grid: { borderColor: '#e2e8f0', strokeDashArray: 4 },
    tooltip: { y: { formatter: v => Number(v).toLocaleString() + ' ج.م' } }
}).render();
</script>
@endif
@endsection