@extends('layouts.app')
@section('title','Clients')
@section('page-title','Clients')

@section('topbar-actions')
  @if(auth()->user()->isCommercial())
    <a href="{{ route('clients.create') }}" class="btn btn-primary btn-sm">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      Nouveau client
    </a>
  @endif
@endsection

@section('content')
<div class="stats-grid" style="grid-template-columns:repeat(4,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"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Actifs" :value="$stats['active']" 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="Prospects" :value="$stats['prospect']" color="yellow">
    <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="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Inactifs" :value="$stats['inactive']" color="navy">
    <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="8" y1="12" x2="16" y2="12"/></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;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="Nom, email, téléphone…" value="{{ request('search') }}" style="min-width:220px">
      </div>
      <select name="status" class="form-control" style="width:auto">
        <option value="">Tous les statuts</option>
        <option value="prospect" @selected(request('status')==='prospect')>Prospect</option>
        <option value="active"   @selected(request('status')==='active')>Actif</option>
        <option value="inactive" @selected(request('status')==='inactive')>Inactif</option>
      </select>
      <button type="submit" class="btn btn-outline btn-sm">Filtrer</button>
      @if(request()->hasAny(['search','status']))
        <a href="{{ route('clients.index') }}" class="btn btn-ghost btn-sm">Réinitialiser</a>
      @endif
    </form>
  </div>

  <div class="table-container">
    <table class="data-table">
      <thead><tr><th>Nom</th><th>Email</th><th>Téléphone</th><th>Ville</th><th>Statut</th><th>CA Total</th><th>Commandes</th><th style="width:90px">Actions</th></tr></thead>
      <tbody>
        @forelse($clients as $client)
        <tr>
          <td><a href="{{ route('clients.show',$client) }}" class="table-link">{{ $client->name }}</a></td>
          <td class="td-muted">{{ $client->email ?? '—' }}</td>
          <td>{{ $client->phone ?? '—' }}</td>
          <td class="td-muted">{{ $client->city ?? '—' }}</td>
          <td><x-ui.badge :color="$client->status_color">{{ $client->status_label }}</x-ui.badge></td>
          <td style="font-weight:600">{{ number_format($client->total_revenue,0,',',' ') }} <span class="td-muted" style="font-size:11px">XAF</span></td>
          <td class="td-muted">{{ $client->total_orders }}</td>
          <td>
            <div class="td-actions">
              <a href="{{ route('clients.show',$client) }}" 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('clients.edit',$client) }}" 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>
              @if($client->sales_count === 0)
              <form method="POST" action="{{ route('clients.destroy',$client) }}" style="display:inline">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-icon btn-sm" data-confirm="Supprimer ce client ?" title="Supprimer" 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>
              @else
              <span class="btn btn-ghost btn-icon btn-sm" title="Client ayant des ventes : suppression impossible" style="color:var(--gray-300);cursor:not-allowed"><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></span>
              @endif
              @endif
            </div>
          </td>
        </tr>
        @empty
        <tr><td colspan="8"><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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div>
          <h3>Aucun client trouvé</h3>
          <p>Créez votre premier client ou modifiez vos filtres.</p>
        </div></td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="pagination-wrap">
    <div class="pagination-info">{{ $clients->firstItem() }}–{{ $clients->lastItem() }} sur {{ $clients->total() }} clients</div>
    {{ $clients->links() }}
  </div>
</div>
@endsection