@extends('layouts.app')
@section('title',$document->reference)
@section('page-title',$document->reference)
@section('topbar-actions')
  <a href="{{ route('documents.print',$document) }}" class="btn btn-outline btn-sm" 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>Imprimer</a>
  @if(auth()->user()->isAdmin())
    <button onclick="if(confirm('Supprimer ce document ?')){document.getElementById('del-doc').submit();}" class="btn btn-danger btn-sm no-print"><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 id="del-doc" method="POST" action="{{ route('documents.destroy',$document) }}">@csrf @method('DELETE')</form>
  @endif
@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>
          <div class="card-title">{{ $document->documentType?->label ?? $document->type_code }} — {{ $document->reference }}</div>
          <div class="card-subtitle">{{ $document->title }}</div>
        </div>
        <span class="badge badge-{{ $document->status_color }}">{{ $document->status_label }}</span>
      </div>
      <div class="card-body">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px">
          <div>
            <div style="font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:6px">Client</div>
            <div style="font-weight:700;font-size:14px">{{ $document->client_nom }}</div>
            @if($document->client_adresse)<div style="font-size:13px;color:var(--gray-500);margin-top:2px">{{ $document->client_adresse }}</div>@endif
            @if($document->client_telephone)<div style="font-size:13px;margin-top:2px">📞 {{ $document->client_telephone }}</div>@endif
            @if($document->client_email)<div style="font-size:13px;margin-top:2px">✉ {{ $document->client_email }}</div>@endif
          </div>
          <div>
            <div style="font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:6px">Dates</div>
            <div style="font-size:13px"><strong>Document :</strong> {{ $document->date_document->format('d/m/Y') }}</div>
            @if($document->date_validite)<div style="font-size:13px;margin-top:2px"><strong>Validité :</strong> {{ $document->date_validite->format('d/m/Y') }}</div>@endif
            @if($document->date_livraison)<div style="font-size:13px;margin-top:2px"><strong>Livraison :</strong> {{ $document->date_livraison->format('d/m/Y') }}</div>@endif
            @if($document->correspondant)<div style="font-size:13px;margin-top:8px"><strong>Contact :</strong> {{ $document->correspondant }}</div>@endif
          </div>
        </div>

        <div class="table-container">
          <table class="data-table">
            <thead><tr><th>#</th><th>Désignation</th><th>Qté</th><th>Unité</th><th>PU HT</th><th>Remise</th><th>HT</th></tr></thead>
            <tbody>
              @foreach($document->lines->sortBy('ligne_ordre') as $line)
              <tr>
                <td class="td-muted">{{ $line->ligne_ordre }}</td>
                <td>
                  <div style="font-weight:600">{{ $line->designation }}</div>
                  @if($line->reference_prod)<div class="td-muted" style="font-size:11px;font-family:monospace">{{ $line->reference_prod }}</div>@endif
                  @if($line->notes_ligne)<div style="font-size:11.5px;color:var(--gray-500);font-style:italic">{{ $line->notes_ligne }}</div>@endif
                </td>
                <td>{{ $line->quantite }}</td>
                <td>{{ $line->unite ?? '—' }}</td>
                <td>{{ number_format($line->prix_unitaire,0,',',' ') }}</td>
                <td>{{ $line->remise>0 ? $line->remise.'%' : '—' }}</td>
                <td style="font-weight:700">{{ number_format($line->montant_ht,0,',',' ') }}</td>
              </tr>
              @endforeach
            </tbody>
            <tfoot>
              <tr><td colspan="6" style="text-align:right;color:var(--gray-500);font-weight:500">Sous-total HT</td><td style="font-weight:600">{{ number_format($document->sous_total,0,',',' ') }}</td></tr>
              @if($document->remise_globale>0)
              <tr><td colspan="6" style="text-align:right;color:var(--gray-500)">Remise ({{ $document->remise_globale }}%)</td><td style="color:var(--error);font-weight:600">-{{ number_format($document->remise_montant,0,',',' ') }}</td></tr>
              @endif
              @if($document->tva_taux>0)
              <tr><td colspan="6" style="text-align:right;color:var(--gray-500)">TVA ({{ $document->tva_taux }}%)</td><td style="font-weight:600">{{ number_format($document->tva_montant,0,',',' ') }}</td></tr>
              @endif
              <tr style="background:var(--brand-500);color:#fff"><td colspan="6" style="text-align:right;font-weight:700;padding:12px">TOTAL TTC</td><td style="font-weight:800;font-size:15px;padding:12px">{{ number_format($document->total_ttc,0,',',' ') }} XAF</td></tr>
            </tfoot>
          </table>
        </div>

        @if($document->conditions_paiement || $document->notes)
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px">
          @if($document->conditions_paiement)
          <div><div style="font-size:11px;color:var(--gray-400);font-weight:600;margin-bottom:4px">CONDITIONS DE PAIEMENT</div><div style="font-size:13px">{{ $document->conditions_paiement }}</div></div>
          @endif
          @if($document->notes)
          <div><div style="font-size:11px;color:var(--gray-400);font-weight:600;margin-bottom:4px">NOTES</div><div style="font-size:13px">{{ $document->notes }}</div></div>
          @endif
        </div>
        @endif
      </div>
    </div>
  </div>

  <div>
    @if(auth()->user()->isAdmin())
    <div class="card" style="margin-bottom:20px">
      <div class="card-header"><div class="card-title">Changer le statut</div></div>
      <div class="card-body">
        <form method="POST" action="{{ route('documents.status',$document) }}">
          @csrf
          <div class="form-group">
            <select name="status" class="form-control">
              @foreach(['BROUILLON'=>'Brouillon','ENVOYE'=>'Envoyé','VALIDE'=>'Validé','REFUSE'=>'Refusé','ANNULE'=>'Annulé','FACTURE'=>'Facturé'] as $v=>$l)
                <option value="{{ $v }}" @selected($document->status===$v)>{{ $l }}</option>
              @endforeach
            </select>
          </div>
          <div class="form-group">
            <textarea name="commentaire" class="form-control" rows="2" placeholder="Commentaire…"></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"><polyline points="20 6 9 17 4 12"/></svg>Appliquer</button>
        </form>
      </div>
    </div>
    @endif

    <div class="card">
      <div class="card-header"><div class="card-title">Historique</div></div>
      <div style="padding:0">
        @forelse($document->historique->sortByDesc('created_at') as $hist)
        <div style="padding:12px 16px;border-bottom:1px solid var(--gray-100)">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <span style="font-size:11.5px;font-weight:700;color:var(--brand-500)">{{ $hist->action }}</span>
            <span style="font-size:11px;color:var(--gray-400)">{{ $hist->created_at->format('d/m H:i') }}</span>
          </div>
          @if($hist->ancien_statut || $hist->nouveau_statut)
          <div style="font-size:12px;color:var(--gray-500);margin-top:2px">{{ $hist->ancien_statut }} → {{ $hist->nouveau_statut }}</div>
          @endif
          @if($hist->commentaire)<div style="font-size:12px;color:var(--gray-500);font-style:italic">{{ $hist->commentaire }}</div>@endif
          <div style="font-size:11px;color:var(--gray-400);margin-top:2px">{{ $hist->user_nom }}</div>
        </div>
        @empty
        <div style="text-align:center;color:var(--gray-400);padding:20px;font-size:13px">Aucun historique</div>
        @endforelse
      </div>
    </div>
  </div>
</div>
@endsection