@extends('layouts.app')
@section('title', 'Images — Signatures')
@section('content')
    @php
        $tag = fn (string $inner) => '{'.'{'.$inner.'}'.'}';
        $isAdmin = auth()->user()->hasRole('admin');
    @endphp
    <header class="page-head">
        <div>
            <h1>Images</h1>
            <p class="lead">
                Logos et bannières des signatures, publiés sur <code>{{ config('signature.public_url') }}/img/</code>.
                Les destinataires les téléchargent depuis ce serveur : visez moins de 100 Ko et la largeur réelle d'affichage
                (120 px pour un logo, 600 px pour une bannière).
            </p>
        </div>
    </header>

    <form method="post" action="{{ route('admin.images.store') }}" enctype="multipart/form-data" class="card" data-busy="Envoi…">
        @csrf
        <h2>Ajouter une image</h2>
        <div class="field-row" style="align-items:flex-end">
            <div style="flex:2">
                <label class="dropzone" data-dropzone>
                    <input type="file" id="image" name="image" accept="image/png,image/jpeg,image/gif" required aria-label="Fichier image">
                    <x-icon name="cloud-upload" :size="26" />
                    <span data-prompt>Glissez une image ici ou <u>parcourez vos fichiers</u></span>
                    <span class="dropzone-name" data-name hidden></span>
                    <span class="muted">PNG, JPEG ou GIF, {{ (int) ($maxKb / 1024) }} Mo maximum</span>
                </label>
            </div>
            <div>
                <label for="name">Nom du fichier (facultatif)</label>
                <input type="text" id="name" name="name" maxlength="80" placeholder="ex. logo-cabm">
                <p class="hint">Sans nom, celui du fichier envoyé est repris.</p>
                <button class="btn" type="submit" style="margin-top:12px"><x-icon name="cloud-upload" /><span data-label>Envoyer</span></button>
            </div>
        </div>
    </form>

    <div class="card-head">
        <h2>Images en ligne</h2>
        <span class="badge plain">{{ $images->count() }}</span>
    </div>

    @if ($images->isEmpty())
        <div class="card empty">
            <x-icon name="images" :size="32" />
            <p><strong>Aucune image</strong>Commencez par le logo : le template fourni par défaut attend un fichier nommé logo-cabm.png.</p>
        </div>
    @else
        <div class="gallery">
            @foreach ($images as $img)
                @php $snippet = '<img src="'.$tag('site_url').'/img/'.$img['name'].'" alt="" width="'.($img['width'] ?? '').'" style="display:block;border:0">'; @endphp
                <article class="media">
                    <a class="media-thumb" href="{{ $img['url'] }}" target="_blank" rel="noopener" title="Ouvrir l'image publique">
                        <img src="{{ asset('img/'.$img['name']) }}" alt="" loading="lazy">
                    </a>
                    <div class="media-body">
                        <div class="media-name">{{ $img['name'] }}</div>
                        <div class="muted">
                            {{ $img['width'] }}×{{ $img['height'] }} px, {{ $img['kb'] }} Ko
                            @if ($img['kb'] > 150) <span class="badge warn">lourde</span> @endif
                        </div>
                        <div class="muted" style="margin-top:6px">
                            {{ $img['used_in'] ? 'Utilisée par : '.implode(', ', $img['used_in']) : 'Non utilisée' }}
                        </div>
                    </div>
                    <div class="media-foot">
                        <button type="button" class="btn secondary small" data-copy="{{ $snippet }}" title="{{ $snippet }}">
                            <x-icon name="copy" :size="15" /><span data-label>Copier la balise</span>
                        </button>
                        <span class="spacer"></span>
                        @if ($isAdmin)
                            <form class="inline" method="post" action="{{ route('admin.images.destroy', $img['name']) }}"
                                  data-confirm="Supprimer {{ $img['name'] }} ? Les messages déjà envoyés qui l'affichent ne la montreront plus."
                                  data-confirm-label="Supprimer" data-confirm-danger>
                                @csrf @method('DELETE')
                                <button class="btn danger small icon-only" type="submit" @disabled($img['used_in'])
                                        title="{{ $img['used_in'] ? 'Retirez-la d\'abord des templates et campagnes' : 'Supprimer' }}" aria-label="Supprimer {{ $img['name'] }}">
                                    <x-icon name="trash-2" :size="15" />
                                </button>
                            </form>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif
@endsection