@extends('layouts.app')
@section('title', 'Top produits')
@section('breadcrumb', 'États / Top produits')
@section('content')
<div class="page-header">
    <div><h1 class="page-title"><i class="fas fa-star" style="color:var(--warning)"></i> Top produits vendus</h1></div>
    <a href="{{ route('etats.index') }}" class="btn btn-secondary">Retour</a>
</div>

<div class="card" style="margin-bottom:16px;"><div class="card-body" style="padding:12px 16px;">
    <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap;">
        <input type="date" name="from" class="form-control" value="{{ $from }}" style="max-width:150px;">
        <input type="date" name="to" class="form-control" value="{{ $to }}" style="max-width:150px;">
        <button type="submit" class="btn btn-primary">Afficher</button>
    </form>
</div></div>

<div class="card"><div class="table-wrap"><table class="table">
    <thead><tr><th>#</th><th>Produit</th><th>Référence</th><th>Qté vendue</th><th>CA TTC</th></tr></thead>
    <tbody>
    @forelse($top as $i => $p)
        <tr>
            <td style="width:40px;font-weight:700;color:{{ $i<3?'#f59e0b':'#64748b' }}">{{ $i+1 }}</td>
            <td><strong>{{ $p->nom }}</strong></td>
            <td><code>{{ $p->code_article }}</code></td>
            <td style="font-weight:600;color:#2563eb;">{{ number_format($p->qte_total,3,',',' ') }}</td>
            <td>{{ number_format($p->ca,3,',',' ') }}</td>
        </tr>
    @empty
        <tr><td colspan="5" class="empty-state">Aucune donnée</td></tr>
    @endforelse
    </tbody>
</table></div></div>
@endsection