@extends('layouts.app')
@section('title','Produits')
@section('page-title','Catalogue produits')

@section('topbar-actions')
  @if(auth()->user()->isAdmin())
    <a href="{{ route('products.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>
      Nouveau produit
    </a>
  @endif
@endsection

@section('content')
<div class="stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:20px">
  <div class="stat-card blue"><div class="stat-header"><div><div class="stat-label">Total produits</div><div class="stat-value">{{ $stats['total'] }}</div></div><div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div></div></div>
  <div class="stat-card yellow"><div class="stat-header"><div><div class="stat-label">Alertes stock</div><div class="stat-value">{{ $stats['low_stock'] }}</div></div><div class="stat-icon yellow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div></div></div>
  <div class="stat-card red"><div class="stat-header"><div><div class="stat-label">Rupture</div><div class="stat-value">{{ $stats['out_of_stock'] }}</div></div><div class="stat-icon red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg></div></div></div>
  <div class="stat-card green"><div class="stat-header"><div><div class="stat-label">Valeur stock</div><div class="stat-value" style="font-size:16px">{{ number_format($stats['total_value'],0,',',' ') }}</div></div><div class="stat-icon green"><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></div></div><div class="stat-sub">XAF</div></div>
</div>

<div class="card">
  <div class="filter-bar">
    <form method="GET" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;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, nom, catégorie…" value="{{ request('search') }}">
      </div>
      <select name="category" class="form-control" style="width:auto">
        <option value="">Toutes catégories</option>
        @foreach($categories as $cat)<option value="{{ $cat }}" @selected(request('category')===$cat)>{{ $cat }}</option>@endforeach
      </select>
      <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;color:var(--gray-600)">
        <input type="checkbox" name="low_stock" value="1" @checked(request('low_stock')) style="accent-color:var(--warning);width:14px;height:14px">
        Stock bas seulement
      </label>
      <button type="submit" class="btn btn-outline btn-sm">Filtrer</button>
      @if(request()->hasAny(['search','category','low_stock']))
        <a href="{{ route('products.index') }}" class="btn btn-ghost btn-sm">Réinitialiser</a>
      @endif
    </form>
  </div>

  <div class="table-container">
    <table class="data-table">
      <thead><tr><th>Référence</th><th>Nom</th><th>Catégorie</th><th>Fournisseur</th><th>P. Achat</th><th>P. Vente</th><th>Marge</th><th>Stock</th><th>Seuil</th><th>Actions</th></tr></thead>
      <tbody>
        @forelse($products as $p)
        <tr>
          <td><span class="code-tag">{{ $p->reference }}</span></td>
          <td><a href="{{ route('products.show',$p) }}" class="table-link">{{ $p->name }}</a></td>
          <td><span class="badge badge-gray">{{ $p->category }}</span></td>
          <td class="td-muted">{{ $p->supplier ?? '—' }}</td>
          <td>{{ number_format($p->purchase_price,0,',',' ') }}</td>
          <td style="font-weight:600">{{ number_format($p->selling_price,0,',',' ') }}</td>
          <td><span style="color:var(--success);font-weight:600">{{ number_format($p->margin,1) }}%</span></td>
          <td>
            @if($p->isCritical())
              <span style="color:var(--error);font-weight:700">{{ $p->stock }}</span>
              <span style="font-size:10px;color:var(--error);margin-left:2px">●</span>
            @elseif($p->isLowStock())
              <span style="color:var(--warning);font-weight:700">{{ $p->stock }}</span>
              <span style="font-size:10px;color:var(--warning);margin-left:2px">●</span>
            @else
              <span style="color:var(--success);font-weight:600">{{ $p->stock }}</span>
            @endif
          </td>
          <td class="td-muted">{{ $p->alert_stock }}</td>
          <td>
            <div class="td-actions">
              <a href="{{ route('products.show',$p) }}" class="btn btn-ghost btn-icon btn-sm" title="Voir"><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(auth()->user()->isAdmin())
              <a href="{{ route('products.edit',$p) }}" class="btn btn-ghost btn-icon btn-sm" title="Modifier"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></a>
              <form method="POST" action="{{ route('products.destroy',$p) }}" style="display:inline">@csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-icon btn-sm" data-confirm="Supprimer ce produit ?" 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"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg></button>
              </form>
              @endif
            </div>
          </td>
        </tr>
        @empty
        <tr><td colspan="10"><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"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div><h3>Aucun produit</h3><p>Ajoutez votre premier produit au catalogue.</p></div></td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
  <div class="pagination-wrap">
    <div class="pagination-info">{{ $products->firstItem() }}–{{ $products->lastItem() }} sur {{ $products->total() }} produits</div>
    {{ $products->links() }}
  </div>
</div>
@endsection