@extends('layouts.app')
@section('title','Ventes')
@section('page-title','Ventes')
@section('topbar-actions')
  <a href="{{ route('sales.create') }}" class="btn btn-primary btn-sm">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    Nouvelle vente
  </a>
@endsection
@section('content')
<div class="stats-grid" style="grid-template-columns:repeat(5,1fr);margin-bottom:20px">
  <x-ui.stat-card label="Total" :value="$stats['total']" color="blue">
    <x-slot:icon><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Brouillons" :value="$stats['draft']" color="navy">
    <x-slot:icon><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Acceptées" :value="$stats['accepted']" color="green">
    <x-slot:icon><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Refusées" :value="$stats['refused']" color="red">
    <x-slot:icon><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="CA Total" :value="number_format($stats['revenue'],0,',',' ')" color="green" sub="XAF" value-size="16px">
    <x-slot:icon><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></x-slot:icon>
  </x-ui.stat-card>
</div>

<div class="card">
  <div class="filter-bar">
    <form method="GET" style="display:flex;gap:8px;flex-wrap:wrap;width:100%">
      <div class="search-wrap">
        <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" name="search" class="form-control" placeholder="Référence, client…" value="{{ request('search') }}">
      </div>
      <select name="status" class="form-control" style="width:auto">
        <option value="">Tous statuts</option>
        <option value="draft" @selected(request('status')==='draft')>Brouillon</option>
        <option value="sent" @selected(request('status')==='sent')>Envoyé</option>
        <option value="accepted" @selected(request('status')==='accepted')>Accepté</option>
        <option value="refused" @selected(request('status')==='refused')>Refusé</option>
        <option value="annulee" @selected(request('status')==='annulee')>Annulée</option>
      </select>
      <button type="submit" class="btn btn-outline btn-sm">Filtrer</button>
      @if(request()->hasAny(['search','status']))<a href="{{ route('sales.index') }}" class="btn btn-ghost btn-sm">Reset</a>@endif
    </form>
  </div>
  <div class="table-container">
    <table class="data-table">
      <thead><tr><th>Référence</th><th>Client</th><th>Montant</th><th>Articles</th><th>Statut</th><th>Date</th><th>Actions</th></tr></thead>
      <tbody>
        @forelse($sales as $sale)
        <tr>
          <td><a href="{{ route('sales.show',$sale) }}" class="table-link" style="font-family:monospace">{{ $sale->reference }}</a></td>
          <td class="td-primary">{{ $sale->client?->name ?? '—' }}</td>
          <td style="font-weight:700">{{ number_format($sale->amount,0,',',' ') }} <span class="td-muted" style="font-size:11px">XAF</span></td>
          <td class="td-muted">{{ $sale->items_count }}</td>
          <td><x-ui.badge :color="$sale->status_color">{{ $sale->status_label }}</x-ui.badge></td>
          <td class="td-muted">{{ $sale->date->format('d/m/Y') }}</td>
          <td>
            <div class="td-actions">
              <a href="{{ route('sales.show',$sale) }}" class="btn btn-ghost btn-icon btn-sm" title="Voir / Gérer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></a>
              @if(!in_array($sale->status, ['accepted','annulee'], true))
              <form method="POST" action="{{ route('sales.destroy',$sale) }}">@csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-icon btn-sm" data-confirm="Supprimer cette vente ?" style="color:var(--error)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg></button>
              </form>
              @endif
            </div>
          </td>
        </tr>
        @empty
        <tr><td colspan="7"><div class="empty-state"><div class="empty-state-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="28" height="28"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg></div><h3>Aucune vente</h3><p>Créez votre première vente.</p></div></td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
  <div class="pagination-wrap">
    <div class="pagination-info">{{ $sales->firstItem() }}–{{ $sales->lastItem() }} sur {{ $sales->total() }}</div>
    {{ $sales->links() }}
  </div>
</div>
@endsection