@extends('layouts.app')
@section('title','Médiathèque')
@section('content')
<div class="h1">Médiathèque</div>
<div class="sub">{{ $totalImages }} image(s) archivée(s). Organisez-les en dossiers (3 niveaux max) : <b>glissez une image sur un dossier</b> pour la déplacer, ou sur un élément du fil d'Ariane pour la faire remonter. Le classement est purement visuel : les images utilisées par le site ne bougent pas.</div>

<div class="card" style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between">
  {{-- Fil d'Ariane (aussi zone de dépôt pour remonter des images) --}}
  <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-weight:700">
    <a href="{{ route('admin.mediatheque.index') }}" class="crumb" data-folder="" style="padding:6px 12px;border-radius:8px;background:var(--bg)"><i data-lucide="home" style="width:1em;height:1em;vertical-align:-.15em"></i> Racine</a>
    @foreach($breadcrumb as $b)
      <span style="color:var(--muted)">/</span>
      <a href="{{ route('admin.mediatheque.index', ['folder' => $b->id]) }}" class="crumb" data-folder="{{ $b->id }}" style="padding:6px 12px;border-radius:8px;background:{{ $loop->last ? 'var(--orange)' : 'var(--bg)' }};color:{{ $loop->last ? '#fff' : 'inherit' }}">{{ $b->name }}</a>
    @endforeach
  </div>
  <div style="display:flex;gap:10px;flex-wrap:wrap">
    <form method="post" action="{{ route('admin.mediatheque.import') }}">@csrf
      <button class="btn ghost"><i data-lucide="download"></i> Importer toutes les images du site</button>
    </form>
    @if($canCreateHere)
    <form method="post" action="{{ route('admin.mediatheque.folders.store') }}" style="display:flex;gap:8px">@csrf
      <input type="hidden" name="parent_id" value="{{ $current?->id }}">
      <input name="name" placeholder="Nom du dossier…" required maxlength="80" style="width:180px">
      <button class="btn"><i data-lucide="folder-plus"></i> Créer</button>
    </form>
    @endif
  </div>
</div>

{{-- Dossiers du niveau courant --}}
@if($folders->count())
<div class="grid" style="grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-bottom:18px">
  @foreach($folders as $f)
  <div class="card folder-card" data-folder="{{ $f->id }}" style="margin:0;cursor:pointer;display:flex;gap:10px;align-items:center" title="Ouvrir ; déposez des images ici pour les déplacer">
    <span style="display:flex"><i data-lucide="folder" style="width:28px;height:28px"></i></span>
    <div style="flex:1;min-width:0">
      <b style="display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $f->name }}</b>
      <span class="sub f-count" data-images="{{ $f->images_count }}" data-children="{{ $f->children_count }}" style="margin:0;font-size:.8rem">{{ $f->images_count }} image(s){{ $f->children_count ? ' · '.$f->children_count.' dossier(s)' : '' }}</span>
    </div>
    <span style="display:flex;gap:4px">
      <button class="btn ghost sm f-rename" data-id="{{ $f->id }}" data-name="{{ $f->name }}" title="Renommer" onclick="event.stopPropagation()"><i data-lucide="pencil"></i></button>
      <button class="btn ghost sm f-del" data-id="{{ $f->id }}" data-name="{{ $f->name }}" title="Supprimer (le contenu remonte d'un niveau)" onclick="event.stopPropagation()"><i data-lucide="trash-2"></i></button>
    </span>
  </div>
  @endforeach
</div>
@endif

{{-- Images du niveau courant --}}
<div class="grid" id="ml-grid" style="grid-template-columns:repeat(auto-fill,minmax(170px,1fr))">
  @foreach($images as $img)
  <div class="card img-card" draggable="true" data-file="{{ $img->filename }}" style="margin:0;padding:10px;cursor:grab">
    <img src="{{ $img->url() }}" alt="{{ $img->original_name }}" loading="lazy" style="width:100%;height:110px;object-fit:cover;border-radius:8px;pointer-events:none">
    <div style="margin-top:8px;font-size:.8rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ $img->original_name }}">{{ $img->original_name }}</div>
    <div class="sub" style="margin:2px 0 0;font-size:.74rem">{{ $img->width && $img->height ? $img->width.'×'.$img->height.' px' : '' }}{{ $img->credit ? ' · © '.$img->credit : '' }}</div>
  </div>
  @endforeach
</div>
<div class="card" id="ml-empty" style="text-align:center;color:var(--muted);{{ $images->count() ? 'display:none' : '' }}">Aucune image {{ $current ? 'dans ce dossier, glissez-en depuis un autre niveau' : 'à la racine' }}.</div>
<div id="ml-toast" style="position:fixed;bottom:22px;right:22px;background:var(--navy);color:#fff;padding:11px 18px;border-radius:10px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.3);display:none;z-index:300"></div>

{{-- Formulaires utilitaires (renommage / suppression) --}}
<form id="f-rename-form" method="post" style="display:none">@csrf @method('PATCH')<input type="hidden" name="name" id="f-rename-name"></form>
<form id="f-del-form" method="post" style="display:none">@csrf @method('DELETE')</form>

<script>
(function () {
  var CSRF = document.querySelector('meta[name="csrf-token"]').content;
  var CURRENT = '{{ $current?->id }}' || null; // dossier affiché (null = racine)
  var dragged = null;

  function toast(msg) {
    var t = document.getElementById('ml-toast');
    t.textContent = msg; t.style.display = 'block';
    clearTimeout(t._h); t._h = setTimeout(function () { t.style.display = 'none'; }, 2200);
  }
  function refreshEmpty() {
    document.getElementById('ml-empty').style.display =
      document.querySelector('#ml-grid .img-card') ? 'none' : '';
  }

  // --- Glisser-déposer des images ---
  document.querySelectorAll('.img-card').forEach(function (card) {
    card.addEventListener('dragstart', function (e) {
      dragged = card.dataset.file;
      e.dataTransfer.effectAllowed = 'move';
      card.style.opacity = '.4';
    });
    card.addEventListener('dragend', function () { card.style.opacity = ''; dragged = null; });
  });

  // Zones de dépôt : dossiers du niveau + fil d'Ariane (remontée).
  // Tout se fait en place, sans recharger la page.
  document.querySelectorAll('.folder-card, .crumb').forEach(function (zone) {
    zone.addEventListener('dragover', function (e) {
      if (!dragged) return;
      e.preventDefault();
      zone.style.outline = '2px solid var(--orange)';
    });
    zone.addEventListener('dragleave', function () { zone.style.outline = ''; });
    zone.addEventListener('drop', function (e) {
      e.preventDefault(); zone.style.outline = '';
      if (!dragged) return;
      var file = dragged, target = zone.dataset.folder || null;
      if (String(target || '') === String(CURRENT || '')) return; // déjà ici
      fetch('{{ route('admin.mediatheque.move') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ files: [file], folder_id: target })
      }).then(function (r) { if (!r.ok) throw 0; return r.json(); })
        .then(function () {
          var card = document.querySelector('.img-card[data-file="' + file + '"]');
          if (card) card.remove();
          // Compteur du dossier cible (s'il est affiché à ce niveau).
          var count = zone.querySelector('.f-count');
          if (count) {
            var n = (parseInt(count.dataset.images, 10) || 0) + 1;
            count.dataset.images = n;
            var c = parseInt(count.dataset.children, 10) || 0;
            count.textContent = n + ' image(s)' + (c ? ' · ' + c + ' dossier(s)' : '');
          }
          refreshEmpty();
          toast('Image déplacée');
        })
        .catch(function () { toast('Déplacement impossible, réessayez.'); });
    });
  });

  // Ouverture d'un dossier au clic
  document.querySelectorAll('.folder-card').forEach(function (card) {
    card.addEventListener('click', function () {
      location.href = '{{ route('admin.mediatheque.index') }}?folder=' + card.dataset.folder;
    });
  });

  // Renommage / suppression
  document.querySelectorAll('.f-rename').forEach(function (b) {
    b.addEventListener('click', function () {
      var name = prompt('Nouveau nom du dossier :', b.dataset.name);
      if (!name || name === b.dataset.name) return;
      var f = document.getElementById('f-rename-form');
      document.getElementById('f-rename-name').value = name;
      f.action = '{{ url('admin/mediatheque/folders') }}/' + b.dataset.id;
      f.submit();
    });
  });
  document.querySelectorAll('.f-del').forEach(function (b) {
    b.addEventListener('click', function () {
      if (!confirm('Supprimer le dossier « ' + b.dataset.name + ' » ?\nSes images et sous-dossiers remonteront d\'un niveau (rien n\'est perdu).')) return;
      var f = document.getElementById('f-del-form');
      f.action = '{{ url('admin/mediatheque/folders') }}/' + b.dataset.id;
      f.submit();
    });
  });
})();
</script>
@endsection