@extends('layouts.app')

@section('content')
<div class="pagetitle">
    <h1>{{ __('reports.reports.top_products_title') }}</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/admin">{{ __('Home') }}</a></li>
            <li class="breadcrumb-item active">{{ __('reports.reports.top_products_title') }}</li>
        </ol>
    </nav>
</div>

<div class="card">
    <div class="card-body pt-3">
        @include('admin.reports._filters', ['show_limit' => true])

        <div class="d-flex gap-2 mb-3">
            <a class="btn btn-outline-success" href="{{ route('export.reports.top_products.excel', request()->query()) }}">
                <i class="bi bi-file-earmark-excel"></i> {{ __('reports.actions.export_excel') }}
            </a>
            <a class="btn btn-outline-danger" href="{{ route('export.reports.top_products.pdf', request()->query()) }}">
                <i class="bi bi-file-earmark-pdf"></i> {{ __('reports.actions.export_pdf') }}
            </a>
        </div>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>{{ __('reports.fields.product') }}</th>
                    <th>{{ __('reports.fields.qty_sold') }}</th>
                    <th>{{ __('reports.fields.revenue') }}</th>
                    <th>{{ __('reports.fields.gross_profit') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rows as $r)
                    <tr>
                        <td>{{ app()->getLocale() == 'ar' ? $r->label_ar : $r->label_en }} (#{{ $r->product_id }})</td>
                        <td>{{ $r->qty_sold }}</td>
                        <td>{{ number_format($r->revenue ?? 0, 2) }}</td>
                        <td>{{ number_format($r->gross_profit ?? 0, 2) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="text-center text-muted">{{ __('reports.messages.no_data') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection