@extends('layouts.app')
@section('title','Documents')
@section('page-title','Documents commerciaux')
@section('topbar-actions')
  @if(auth()->user()->isAdmin())
  <div style="display:flex;gap:6px">
    @foreach($types->take(3) as $type)
    <a href="{{ route('documents.create') }}?type={{ $type->code }}" class="btn btn-outline btn-sm">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      {{ $type->label }}
    </a>
    @endforeach
  </div>
  @endif
@endsection
@section('content')
<div class="stats-grid" style="grid-template-columns:repeat(5,1fr);margin-bottom:20px">
  <div class="stat-card blue"><div class="stat-header"><div><div class="stat-label">Total</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="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></div></div></div>
  <div class="stat-card"><div class="stat-header"><div><div class="stat-label">Brouillons</div><div class="stat-value">{{ $stats['brouillon'] }}</div></div><div class="stat-icon navy"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div></div></div>
  <div class="stat-card yellow"><div class="stat-header"><div><div class="stat-label">Envoyés</div><div class="stat-value">{{ $stats['envoye'] }}</div></div><div class="stat-icon yellow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></div></div></div>
  <div class="stat-card green"><div class="stat-header"><div><div class="stat-label">Validés</div><div class="stat-value">{{ $stats['valide'] }}</div></div><div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div></div></div>
  <div class="stat-card green"><div class="stat-header"><div><div class="stat-label">Total validé</div><div class="stat-value" style="font-size:15px">{{ number_format($stats['total_ttc'],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 TTC</div></div>
</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="type" class="form-control" style="width:auto">
        <option value="">Tous types</option>
        @foreach($types as $t)<option value="{{ $t->code }}" @selected(request('type')===$t->code)>{{ $t->label }}</option>@endforeach
      </select>
      <select name="status" class="form-control" style="width:auto">
        <option value="">Tous statuts</option>
        @foreach(['BROUILLON'=>'Brouillon','ENVOYE'=>'Envoyé','VALIDE'=>'Validé','REFUSE'=>'Refusé','ANNULE'=>'Annulé','FACTURE'=>'Facturé'] as $v=>$l)
          <option value="{{ $v }}" @selected(request('status')===$v)>{{ $l }}</option>
        @endforeach
      </select>
      <button type="submit" class="btn btn-outline btn-sm">Filtrer</button>
      @if(request()->hasAny(['search','type','status']))<a href="{{ route('documents.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>Type</th><th>Client</th><th>Total TTC</th><th>Statut</th><th>Date</th><th>Actions</th></tr></thead>
      <tbody>
        @forelse($documents as $doc)
        <tr>
          <td><a href="{{ route('documents.show',$doc) }}" class="table-link" style="font-family:monospace">{{ $doc->reference }}</a></td>
          <td><span class="badge badge-blue">{{ $doc->documentType?->label ?? $doc->type_code }}</span></td>
          <td class="td-primary">{{ $doc->client_nom }}</td>
          <td style="font-weight:700">{{ number_format($doc->total_ttc,0,',',' ') }} <span class="td-muted" style="font-size:11px">XAF</span></td>
          <td><span class="badge badge-{{ $doc->status_color }}">{{ $doc->status_label }}</span></td>
          <td class="td-muted">{{ $doc->date_document->format('d/m/Y') }}</td>
          <td>
            <div class="td-actions">
              <a href="{{ route('documents.show',$doc) }}" 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>
              <a href="{{ route('documents.print',$doc) }}" class="btn btn-ghost btn-icon btn-sm" title="Imprimer" target="_blank"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg></a>
              @if(auth()->user()->isAdmin())
              <form method="POST" action="{{ route('documents.destroy',$doc) }}">@csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-icon btn-sm" data-confirm="Supprimer ce document ?" 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"><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></div><h3>Aucun document</h3></div></td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
  <div class="pagination-wrap">
    <div class="pagination-info">{{ $documents->firstItem() }}–{{ $documents->lastItem() }} sur {{ $documents->total() }}</div>
    {{ $documents->links() }}
  </div>
</div>
@endsection