@extends('layouts.app')
@section('title','Documents')
@section('page-title','Documents commerciaux')
@section('topbar-actions')
  @if(auth()->user()->isCommercial())
  <div class="doc-create-dropdown" style="position:relative">
    <button class="btn btn-primary btn-sm" onclick="toggleDocDropdown()" id="doc-create-btn" type="button">
      <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
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12" style="margin-left:2px"><polyline points="6 9 12 15 18 9"/></svg>
    </button>
    <div id="doc-create-menu" style="display:none;position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-md);min-width:190px;z-index:200;overflow:hidden">
      @forelse($types as $type)
      <a href="{{ route('documents.create') }}?type={{ $type->code }}"
         style="display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;color:var(--gray-700);text-decoration:none;transition:background var(--transition)"
         onmouseover="this.style.background='var(--gray-50)'" onmouseout="this.style.background='transparent'">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="color:var(--brand-500)"><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>
        {{ $type->label }}
      </a>
      @empty
      {{-- Fallback si document_types est vide : liens directs avec codes fixes --}}
      @foreach([['code'=>'PRO','label'=>'Proforma'],['code'=>'DEV','label'=>'Devis'],['code'=>'FAC','label'=>'Facture'],['code'=>'BL','label'=>'Bon de livraison'],['code'=>'BC','label'=>'Bon de commande'],['code'=>'AVO','label'=>'Avoir']] as $t)
      <a href="{{ route('documents.create') }}?type={{ $t['code'] }}"
         style="display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;color:var(--gray-700);text-decoration:none;transition:background var(--transition)"
         onmouseover="this.style.background='var(--gray-50)'" onmouseout="this.style.background='transparent'">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="color:var(--brand-500)"><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>
        {{ $t['label'] }}
      </a>
      @endforeach
      @endforelse
    </div>
  </div>
  @endif
@endsection
@section('content')
<div class="stats-grid" style="grid-template-columns:repeat(5,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="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></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Brouillons" :value="$stats['brouillon']" 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"/><polyline points="12 6 12 12 16 14"/></svg></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Envoyés" :value="$stats['envoye']" color="yellow">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Validés" :value="$stats['valide']" 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="Total validé" :value="number_format($stats['total_ttc'],0,',',' ')" color="green" sub="XAF" value-size="15px">
    <x-slot:icon><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></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;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)
        @php $docVerrouille = in_array($doc->status, ['VALIDE','FACTURE','ANNULE'], true); @endphp
        <tr>
          <td><a href="{{ route('documents.show',$doc) }}" class="table-link" style="font-family:monospace">{{ $doc->reference }}</a></td>
          <td><x-ui.badge color="blue">{{ $doc->documentType?->label ?? $doc->type_code }}</x-ui.badge></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><x-ui.badge :color="$doc->status_color">{{ $doc->status_label }}</x-ui.badge></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(!$docVerrouille && auth()->user()->isCommercial())
              <a href="{{ route('documents.edit',$doc) }}" 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>
              @endif
              @if(!$docVerrouille && 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

@push('scripts')
<script>
function toggleDocDropdown() {
  var menu = document.getElementById('doc-create-menu');
  if (!menu) return;
  var isOpen = menu.style.display === 'block';
  menu.style.display = isOpen ? 'none' : 'block';
}

// Fermer le dropdown en cliquant ailleurs
document.addEventListener('click', function(e) {
  var btn  = document.getElementById('doc-create-btn');
  var menu = document.getElementById('doc-create-menu');
  if (!menu || !btn) return;
  if (!btn.contains(e.target) && !menu.contains(e.target)) {
    menu.style.display = 'none';
  }
});

// Fermer avec Escape
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    var menu = document.getElementById('doc-create-menu');
    if (menu) menu.style.display = 'none';
  }
});
</script>
@endpush