@extends('layouts.app')
@section('title', 'Importer des fichiers')
@section('page-title', 'Importer des fichiers')
@section('breadcrumb')
  <a href="{{ route('ged.index') }}">Médiathèque</a>
  <span class="breadcrumb-sep">/</span>
  <span class="breadcrumb-current">Importer</span>
@endsection

@section('topbar-actions')
  <a href="{{ route('ged.index') }}" class="btn btn-outline btn-sm">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><polyline points="15 18 9 12 15 6"/></svg>
    Médiathèque
  </a>
@endsection

@section('content')
<div style="max-width:680px">
  <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"><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 des documents
      </div>
    </div>
    <div class="card-body">

      @if($entiteType && $entiteId)
      <div class="alert alert-info" style="margin-bottom:20px">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
        <div class="alert-body">Ces fichiers seront rattachés à : <strong>{{ $entiteNom ?? $entiteType }}</strong></div>
      </div>
      @endif

      <form method="POST" action="{{ route('ged.store') }}" enctype="multipart/form-data">
        @csrf

        @if($entiteType && $entiteId)
          <input type="hidden" name="entite_type" value="{{ $entiteType }}">
          <input type="hidden" name="entite_id"   value="{{ $entiteId }}">
        @endif

        {{-- Zone de dépôt --}}
        <div id="drop-zone">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:44px;height:44px;color:var(--gray-300);margin-bottom:12px"><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>
          <p style="font-weight:600;color:var(--gray-600);margin-bottom:4px">Glissez vos fichiers ici</p>
          <p style="font-size:12.5px;color:var(--gray-400);margin-bottom:16px">ou</p>
          <label for="fichiers-input" class="btn btn-primary btn-sm" style="cursor:pointer">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
            Parcourir
          </label>
          <input type="file" id="fichiers-input" name="fichiers[]" multiple
                 accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.odt,.ods,.jpg,.jpeg,.png,.gif,.webp,.svg,.txt,.csv,.rtf,.zip,.rar"
                 style="display:none">
          <p style="font-size:11.5px;color:var(--gray-300);margin-top:12px">PDF, Word, Excel, Images, ZIP — max 30 Mo par fichier — 10 fichiers max</p>
        </div>

        {{-- Liste des fichiers sélectionnés --}}
        <div id="file-list" style="display:none;margin:16px 0">
          <p style="font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em">Fichiers sélectionnés</p>
          <ul id="file-items" style="list-style:none;padding:0;display:flex;flex-direction:column;gap:6px"></ul>
        </div>

        <div class="divider"></div>

        {{-- Métadonnées --}}
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Catégorie</label>
            <select name="categorie_id" class="form-control">
              <option value="">— Sans catégorie —</option>
              @foreach($categories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->nom }}</option>
              @endforeach
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Dossier</label>
            <select name="dossier_id" class="form-control">
              <option value="">— Aucun dossier —</option>
              @foreach($dossiers as $d)
                <option value="{{ $d->id }}">{{ $d->nom }}</option>
                @foreach($d->enfants as $e)
                  <option value="{{ $e->id }}">└ {{ $e->nom }}</option>
                @endforeach
              @endforeach
            </select>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Description <span style="color:var(--gray-400);font-weight:400">(optionnel)</span></label>
          <textarea name="description" class="form-control" rows="2" placeholder="Quelques mots pour décrire ces documents…" maxlength="500"></textarea>
        </div>

        <div class="form-group">
          <label class="form-label">Tags <span style="color:var(--gray-400);font-weight:400">(séparés par des virgules)</span></label>
          <input type="text" name="tags" class="form-control" placeholder="ex : 2026, urgent, contrat-cadre" maxlength="300">
          <p class="form-hint">Les tags facilitent la recherche ultérieure.</p>
        </div>

        <div class="form-actions" style="justify-content:flex-end">
          <a href="{{ route('ged.index') }}" class="btn btn-outline">Annuler</a>
          <button type="submit" id="submit-btn" class="btn btn-primary" disabled>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><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>
</div>
@endsection

@push('scripts')
<style>
#drop-zone {
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--gray-25);
  margin-bottom: 20px;
}
#drop-zone.drag-over {
  border-color: var(--brand-500);
  background: var(--brand-50);
}
</style>
<script>
(function () {
  var input    = document.getElementById('fichiers-input');
  var dropZone = document.getElementById('drop-zone');
  var fileList = document.getElementById('file-list');
  var fileItems= document.getElementById('file-items');
  var submit   = document.getElementById('submit-btn');

  function formatSize(b) {
    if (b < 1024) return b + ' o';
    if (b < 1048576) return (b/1024).toFixed(1) + ' Ko';
    return (b/1048576).toFixed(2) + ' Mo';
  }

  function renderFiles(files) {
    fileItems.innerHTML = '';
    if (!files.length) { fileList.style.display = 'none'; submit.disabled = true; return; }
    fileList.style.display = 'block';
    submit.disabled = false;
    Array.from(files).forEach(function (f) {
      var li = document.createElement('li');
      li.style.cssText = 'display:flex;align-items:center;gap:10px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:8px 12px;font-size:12.5px';
      li.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="var(--brand-500)" stroke-width="2" width="14" height="14"><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>'
        + '<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gray-700)">' + f.name + '</span>'
        + '<span style="color:var(--gray-400);white-space:nowrap;font-size:11.5px">' + formatSize(f.size) + '</span>';
      fileItems.appendChild(li);
    });
  }

  input.addEventListener('change', function () { renderFiles(this.files); });

  dropZone.addEventListener('click', function (e) {
    if (e.target === dropZone || e.target.closest('#drop-zone') && !e.target.closest('label')) input.click();
  });

  dropZone.addEventListener('dragover', function (e) {
    e.preventDefault(); this.classList.add('drag-over');
  });
  ['dragleave', 'dragend'].forEach(function (ev) {
    dropZone.addEventListener(ev, function () { dropZone.classList.remove('drag-over'); });
  });
  dropZone.addEventListener('drop', function (e) {
    e.preventDefault();
    this.classList.remove('drag-over');
    var dt = new DataTransfer();
    Array.from(e.dataTransfer.files).forEach(function (f) { dt.items.add(f); });
    input.files = dt.files;
    renderFiles(input.files);
  });
})();
</script>
@endpush