@extends('layouts.app')
@section('title','Top Products Report')
@section('page_title','Top Products')
@section('content')
@include('reports.partials.print-header',['reportTitle'=>'Top Products Report','reportSubtitle'=>\Carbon\Carbon::parse($dateFrom)->format('d M Y').' — '.\Carbon\Carbon::parse($dateTo)->format('d M Y')])
<div class="page-heading"><h2>Top Products Report</h2><div class="heading-actions"><x-export-choice route-name="reports.top-products.export.print" :current="['date_from'=>$dateFrom,'date_to'=>$dateTo,'limit'=>$limit]" /><a class="btn btn-secondary" href="{{ route('reports.index') }}">Back to Reports</a></div></div>
<div class="card filter-card mobile-collapsible-filter"><button class="mobile-filter-toggle" type="button" data-mobile-filter-toggle aria-controls="topProductsFilterForm" aria-expanded="false"><span><strong>Filters</strong><small>Date range and list size</small></span><b aria-hidden="true">+</b></button><form class="filter-grid report-range-filter" id="topProductsFilterForm" method="GET"><input type="date" name="date_from" value="{{ $dateFrom }}" aria-label="Date from"><input type="date" name="date_to" value="{{ $dateTo }}" aria-label="Date to"><select name="limit" aria-label="Number of products"><option value="10" @selected($limit===10)>Top 10</option><option value="20" @selected($limit===20)>Top 20</option><option value="50" @selected($limit===50)>Top 50</option></select><button class="btn" type="submit">View Report</button></form></div>
<div class="card table-card">
    <div class="table-scroll desktop-report-table"><table class="data-table"><thead><tr><th>Rank</th><th>Product</th><th>Category</th><th>Orders</th><th>Pieces Sold</th><th>Sales</th><th>Profit</th><th>Performance</th></tr></thead><tbody>
    @forelse($products as $index=>$product)<tr><td><strong>#{{ $index+1 }}</strong></td><td><strong>{{ $product->product_name }}</strong></td><td>{{ $product->category_name ?: 'Outside / General Products' }}</td><td>{{ number_format($product->order_count) }}</td><td>{{ number_format($product->pieces_sold) }}</td><td>TZS {{ tzs_amount($product->sales_total) }}</td><td>TZS {{ tzs_amount($product->profit_total) }}</td><td><div class="mini-progress"><i style="width:{{ max(3,round(($product->sales_total/$maxSales)*100)) }}%"></i></div></td></tr>
    @empty<tr><td colspan="8" class="empty-cell">No product sales found for this date range.</td></tr>@endforelse
    </tbody></table></div>
    <div class="report-mobile-list">@forelse($products as $index=>$product)<article class="report-mobile-card mobile-data-card"><div class="mobile-data-visual mobile-data-rank">#{{ $index+1 }}</div><div class="report-mobile-head mobile-data-head"><div><h3>{{ $product->product_name }}</h3><small>{{ $product->category_name ?: 'Outside / General Products' }}</small></div></div><div class="mobile-data-body"><div class="mobile-data-keyline"><strong>TZS {{ tzs_amount($product->sales_total) }}</strong></div><div class="mobile-data-support mobile-explicit-metrics"><span>{{ number_format($product->pieces_sold) }} pieces</span><span>{{ number_format($product->order_count) }} orders</span><span><b>Profit:</b> TZS {{ tzs_amount($product->profit_total) }}</span></div><div class="mini-progress"><i style="width:{{ max(3,round(($product->sales_total/$maxSales)*100)) }}%"></i></div></div></article>@empty<div class="empty-state-professional"><div class="empty-icon">T</div><h3>No product sales</h3><p>Try another date range or complete a new sale.</p><a class="btn" href="{{ route('pos.index') }}">Start Sale</a></div>@endforelse</div>
</div>
@endsection