{{--
  Partial : ged/_widget.blade.php
  Usage   : @include('ged._widget', ['entiteType' => Client::class, 'entiteId' => $client->id, 'entiteNom' => $client->name])

  Affiche les documents rattachés à une entité + formulaire d'upload inline.
  Réutilisable dans toutes les fiches (clients, produits, ventes, etc.)
--}}

@php
  $fichiers   = $fichiers   ?? \App\Models\GedFichier::actif()->pourEntite($entiteType, $entiteId)->with('categorie')->orderByDesc('created_at')->get();
  $categories = $categories ?? \App\Models\GedCategorie::where('is_active', true)->orderBy('nom')->get();
  $dossiers   = $dossiers   ?? \App\Models\GedDossier::where('entite_type', $entiteType)->where('entite_id', $entiteId)->orderBy('nom')->get();
  $widgetId   = 'ged-widget-' . md5($entiteType . $entiteId);
@endphp

<div class="card" id="{{ $widgetId }}">
  <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"><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>
      Documents
      @if($fichiers->count())
        <span class="badge badge-gray" style="margin-left:6px;font-size:11px">{{ $fichiers->count() }}</span>
      @endif
    </div>
    <button type="button" onclick="toggleGedUpload('{{ $widgetId }}')" class="btn btn-primary btn-sm">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
      Ajouter
    </button>
  </div>

  {{-- Formulaire d'upload inline (masqué par défaut) ─────────────────────}}
  <div id="{{ $widgetId }}-form" style="display:none;border-bottom:1px solid var(--gray-100)">
    <div class="card-body" style="padding:16px">
      <form method="POST" action="{{ route('ged.store') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="entite_type" value="{{ $entiteType }}">
        <input type="hidden" name="entite_id"   value="{{ $entiteId }}">

        <div class="form-row" style="margin-bottom:10px">
          <div class="form-group" style="margin:0">
            <label class="form-label" style="font-size:11.5px">Fichier(s) <span class="req">*</span></label>
            <input type="file" name="fichiers[]" multiple
                   accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp,.svg,.txt,.csv,.zip"
                   class="form-control" style="font-size:12.5px" required>
          </div>
          <div class="form-group" style="margin:0">
            <label class="form-label" style="font-size:11.5px">Catégorie</label>
            <select name="categorie_id" class="form-control" style="font-size:12.5px">
              <option value="">— Aucune —</option>
              @foreach($categories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->nom }}</option>
              @endforeach
            </select>
          </div>
        </div>

        <div class="form-group" style="margin-bottom:12px">
          <input type="text" name="tags" class="form-control" style="font-size:12.5px"
                 placeholder="Tags (optionnel, séparés par des virgules)">
        </div>

        <div style="display:flex;gap:8px;justify-content:flex-end">
          <button type="button" onclick="toggleGedUpload('{{ $widgetId }}')" class="btn btn-ghost btn-sm">Annuler</button>
          <button type="submit" class="btn btn-primary btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            Importer
          </button>
        </div>
      </form>
    </div>
  </div>

  {{-- Liste des fichiers existants ───────────────────────────────────────}}
  @if($fichiers->count())
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>Fichier</th>
            <th>Catégorie</th>
            <th>Taille</th>
            <th>Date</th>
            <th style="width:80px"></th>
          </tr>
        </thead>
        <tbody>
          @foreach($fichiers as $fichier)
          <tr>
            <td>
              <div style="display:flex;align-items:center;gap:8px">
                <span style="color:{{ $fichier->couleur_icone }};flex-shrink:0;width:16px;height:16px">
                  @include('ged._svg_icone', ['icone' => $fichier->icone])
                </span>
                <a href="{{ route('ged.show', $fichier) }}" class="table-link"
                   style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle"
                   title="{{ $fichier->nom_original }}">
                  {{ $fichier->nom_original }}
                </a>
              </div>
            </td>
            <td>
              @if($fichier->categorie)
                <span class="badge badge-{{ $fichier->categorie->couleur }}" style="font-size:11px">{{ $fichier->categorie->nom }}</span>
              @else
                <span class="td-muted">—</span>
              @endif
            </td>
            <td class="td-muted">{{ $fichier->taille_formatee }}</td>
            <td class="td-muted">{{ $fichier->created_at->format('d/m/Y') }}</td>
            <td>
              <div class="td-actions">
                <a href="{{ route('ged.telecharger', $fichier) }}" class="btn btn-ghost btn-icon btn-sm" title="Télécharger">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                </a>
                @if($fichier->est_previsualisable)
                <a href="{{ route('ged.apercu', $fichier) }}" target="_blank" class="btn btn-ghost btn-icon btn-sm" title="Aperçu">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><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>
                @endif
                <form method="POST" action="{{ route('ged.destroy', $fichier) }}" style="display:inline">
                  @csrf @method('DELETE')
                  <button type="submit" class="btn btn-ghost btn-icon btn-sm" data-confirm="Supprimer ce fichier ?" style="color:var(--error)" title="Corbeille">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @else
    <div class="empty-state" style="padding:28px 0">
      <div class="empty-state-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24"><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 style="font-size:13px">Aucun document</h3>
      <p>Cliquez sur « Ajouter » pour importer un premier document.</p>
    </div>
  @endif
</div>

@once
@push('scripts')
<script>
function toggleGedUpload(widgetId) {
  var form = document.getElementById(widgetId + '-form');
  if (form) form.style.display = (form.style.display === 'none' || form.style.display === '') ? 'block' : 'none';
}
</script>
@endpush
@endonce