@extends('layouts.app')
@section('title',$sale->reference)
@section('page-title','Vente : '.$sale->reference)
@section('topbar-actions')
  <a href="{{ route('sales.edit',$sale) }}" class="btn btn-outline btn-sm"><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>Modifier statut</a>
@endsection
@section('content')
<div style="display:grid;grid-template-columns:1fr 320px;gap:20px">
  <div>
    <div class="card" style="margin-bottom:20px">
      <div class="card-header">
        <div class="card-title">Détails de la vente</div>
        <span class="badge badge-{{ $sale->status_color }}">{{ $sale->status_label }}</span>
      </div>
      <div class="card-body">
        <div class="detail-grid">
          <div class="detail-item"><label>Référence</label><span class="code-tag">{{ $sale->reference }}</span></div>
          <div class="detail-item"><label>Client</label><span><a href="{{ route('clients.show',$sale->client) }}" class="table-link">{{ $sale->client?->name }}</a></span></div>
          <div class="detail-item"><label>Montant total</label><span style="font-size:18px;font-weight:800;color:var(--success)">{{ number_format($sale->amount,0,',',' ') }} XAF</span></div>
          <div class="detail-item"><label>Créé par</label><span>{{ $sale->creator?->name ?? '—' }}</span></div>
          <div class="detail-item"><label>Date</label><span>{{ $sale->date->format('d/m/Y') }}</span></div>
          <div class="detail-item"><label>Notes</label><span>{{ $sale->notes ?? '—' }}</span></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header"><div class="card-title">Lignes de vente</div></div>
      <div class="table-container">
        <table class="data-table">
          <thead><tr><th>Produit</th><th>Qté</th><th>Prix unitaire</th><th>Total</th></tr></thead>
          <tbody>
            @forelse($sale->saleItems as $item)
            <tr>
              <td><a href="{{ route('products.show',$item->product) }}" class="table-link">{{ $item->product?->name }}</a><div class="td-muted" style="font-size:11px">{{ $item->product?->reference }}</div></td>
              <td>{{ $item->quantity }}</td>
              <td>{{ number_format($item->unit_price,0,',',' ') }} XAF</td>
              <td style="font-weight:700">{{ number_format($item->total_price,0,',',' ') }} XAF</td>
            </tr>
            @empty
            <tr><td colspan="4"><div class="empty-state" style="padding:24px 0"><h3>Aucune ligne</h3></div></td></tr>
            @endforelse
          </tbody>
          <tfoot><tr style="background:var(--gray-50)"><td colspan="3" style="text-align:right;font-weight:700;padding:12px">TOTAL</td><td style="font-weight:800;color:var(--success);font-size:15px;padding:12px">{{ number_format($sale->amount,0,',',' ') }} XAF</td></tr></tfoot>
        </table>
      </div>
    </div>
  </div>
  <div class="card" style="align-self:start">
    <div class="card-header"><div class="card-title">Actions</div></div>
    <div class="card-body">
      <form method="POST" action="{{ route('sales.update',$sale) }}">
        @csrf @method('PUT')
        <div class="form-group">
          <label class="form-label">Changer le statut</label>
          <select name="status" class="form-control">
            <option value="draft" @selected($sale->status==='draft')>Brouillon</option>
            <option value="sent" @selected($sale->status==='sent')>Envoyé</option>
            <option value="accepted" @selected($sale->status==='accepted')>Accepté</option>
            <option value="refused" @selected($sale->status==='refused')>Refusé</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Notes</label>
          <textarea name="notes" class="form-control" rows="3">{{ $sale->notes }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary" style="width:100%"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/></svg>Mettre à jour</button>
      </form>
      <div class="divider"></div>
      <form method="POST" action="{{ route('sales.destroy',$sale) }}">
        @csrf @method('DELETE')
        <button type="submit" class="btn btn-danger" style="width:100%" data-confirm="Supprimer cette vente ? Le stock sera restauré."><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>Supprimer</button>
      </form>
    </div>
  </div>
</div>
@endsection