@extends('layouts.app')
@section('title',$client->name)
@section('page-title',$client->name)
@section('breadcrumb')
  <a href="{{ route('clients.index') }}">Clients</a>
  <span class="breadcrumb-sep">/</span>
  <span class="breadcrumb-current">{{ $client->name }}</span>
@endsection

@section('topbar-actions')
  @if(auth()->user()->isCommercial())
    <a href="{{ route('clients.edit',$client) }}" 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
    </a>
  @endif
  <a href="{{ route('documents.create') }}?type=DEV&client_id={{ $client->id }}" 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 devis
  </a>
@endsection

@section('content')
<div style="display:grid;grid-template-columns:1fr 340px;gap:20px">

  <div>
    {{-- Info card --}}
    <div class="card" style="margin-bottom:20px">
      <div class="card-header">
        <div class="card-title">Informations client</div>
        <x-ui.badge :color="$client->status_color">{{ $client->status_label }}</x-ui.badge>
      </div>
      <div class="card-body">
        <div class="detail-grid">
          <div class="detail-item"><label>Nom</label><span>{{ $client->name }}</span></div>
          <div class="detail-item"><label>Email</label><span>{{ $client->email ?? '—' }}</span></div>
          <div class="detail-item"><label>Téléphone</label><span>{{ $client->phone ?? '—' }}</span></div>
          <div class="detail-item"><label>Ville</label><span>{{ $client->city ?? '—' }}</span></div>
          <div class="detail-item"><label>CA Total</label><span style="color:var(--success);font-weight:700">{{ number_format($client->total_revenue,0,',',' ') }} XAF</span></div>
          <div class="detail-item"><label>Commandes</label><span>{{ $client->total_orders }}</span></div>
          <div class="detail-item"><label>Client depuis</label><span>{{ $client->created_at->format('d/m/Y') }}</span></div>
        </div>
      </div>
    </div>

    {{-- Documents commerciaux (devis/factures/BL/avoirs) ──────────────────--}}
    <div class="card" style="margin-bottom:20px">
      <div class="card-header">
        <div class="card-title">Documents commerciaux</div>
        <a href="{{ route('documents.create') }}?type=DEV&client_id={{ $client->id }}" class="btn btn-outline 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 document
        </a>
      </div>
      <div class="table-container">
        <table class="data-table">
          <thead><tr><th>Référence</th><th>Type</th><th>Statut</th><th>Montant</th><th>Date</th></tr></thead>
          <tbody>
            @forelse($documents as $doc)
            <tr>
              <td><a href="{{ route('documents.show',$doc) }}" class="table-link">{{ $doc->reference }}</a></td>
              <td class="td-muted">{{ $doc->documentType?->label }}</td>
              <td><x-ui.badge :color="$doc->status_color">{{ $doc->status_label }}</x-ui.badge></td>
              <td style="font-weight:600">{{ number_format($doc->total_ttc,0,',',' ') }} XAF</td>
              <td class="td-muted">{{ $doc->date_document->format('d/m/Y') }}</td>
            </tr>
            @empty
            <tr><td colspan="5"><div class="empty-state" style="padding:24px 0"><h3 style="font-size:13px;color:var(--gray-400)">Aucun document</h3></div></td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    {{-- Widget GED — pièces jointes génériques (contrats, pièces d'identité,
         etc.), distinctes des devis/factures ci-dessus (retour utilisateur
         INSTALL.md 17/08, point 7 : clarification de ce que représente
         « Catégorie des documents » sur cette page). ──────────────────────--}}
    <div style="margin-bottom:20px">
      @include('ged._widget', [
        'entiteType' => \App\Models\Client::class,
        'entiteId'   => $client->id,
        'entiteNom'  => $client->name,
        'titre'      => 'Fichiers joints',
        'sousTitre'  => "Fichiers importés associés à ce client (contrats, pièces d'identité…) — distinct des documents commerciaux ci-dessus.",
      ])
    </div>

    {{-- Sales --}}
    <div class="card">
      <div class="card-header">
        <div class="card-title">Historique des ventes</div>
        <a href="{{ route('sales.create') }}?client_id={{ $client->id }}" 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>
      </div>
      <div class="table-container">
        <table class="data-table">
          <thead><tr><th>Référence</th><th>Montant</th><th>Statut</th><th>Date</th></tr></thead>
          <tbody>
            @forelse($sales as $sale)
            <tr>
              <td><a href="{{ route('sales.show',$sale) }}" class="table-link">{{ $sale->reference }}</a></td>
              <td style="font-weight:600">{{ number_format($sale->amount,0,',',' ') }} XAF</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>
            </tr>
            @empty
            <tr><td colspan="4"><div class="empty-state" style="padding:24px 0"><h3 style="font-size:13px;color:var(--gray-400)">Aucune vente</h3></div></td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- Sidebar: relances --}}
  <div>
    <div class="card">
      <div class="card-header">
        <div class="card-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
          Relances
        </div>
      </div>
      <div class="card-body">
        <form method="POST" action="{{ route('clients.followups.store',$client) }}" style="margin-bottom:16px">
          @csrf
          <div class="form-group">
            <label class="form-label">Date de relance <span class="req">*</span></label>
            <input type="datetime-local" name="scheduled_date" class="form-control" required>
          </div>
          <div class="form-group">
            <label class="form-label">Notes</label>
            <textarea name="notes" class="form-control" rows="2" placeholder="Objet de la relance…"></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"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Planifier une relance
          </button>
        </form>

        <div style="display:flex;flex-direction:column;gap:8px">
          @forelse($followUps as $fu)
          <div style="background:var(--gray-50);border-radius:var(--radius-sm);padding:10px 12px;border-left:3px solid {{ $fu->status==='done' ? 'var(--success)' : ($fu->status==='cancelled' ? 'var(--gray-300)' : 'var(--warning)') }}">
            <div style="font-size:11.5px;color:var(--gray-400);margin-bottom:2px">{{ $fu->scheduled_date->format('d/m/Y H:i') }}</div>
            <div style="font-size:13px;color:var(--gray-700);margin-bottom:4px">{{ $fu->notes ?? 'Sans note' }}</div>
            <div style="font-size:11px;color:var(--gray-400)">Par {{ $fu->user?->name }}</div>
            @if($fu->status==='pending')
            <form method="POST" action="{{ route('followups.update',$fu) }}" style="margin-top:8px;display:flex;gap:4px">
              @csrf @method('PUT')
              <input type="hidden" name="status" value="done">
              <button type="submit" class="btn btn-success btn-sm" style="font-size:11.5px;padding:3px 10px">✓ Fait</button>
              <button type="button" onclick="this.previousElementSibling.value='cancelled';this.form.submit()" class="btn btn-outline btn-sm" style="font-size:11.5px;padding:3px 10px">Annuler</button>
            </form>
            @else
            <x-ui.badge :color="$fu->status==='done' ? 'green' : 'gray'" style="margin-top:4px;font-size:11px">{{ $fu->status==='done' ? '✓ Fait' : 'Annulé' }}</x-ui.badge>
            @endif
          </div>
          @empty
          <div style="text-align:center;color:var(--gray-400);font-size:13px;padding:16px 0">Aucune relance planifiée</div>
          @endforelse
        </div>
      </div>
    </div>
  </div>
</div>
@endsection