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

    <div class="card">
        <h2>Ajouter une image</h2>
        <form method="post" action="{{ route('admin.images.store') }}" enctype="multipart/form-data" class="row" style="align-items:flex-end">
            @csrf
            <div style="flex:2;min-width:240px">
                <label for="image">Fichier (PNG, JPEG, GIF — {{ (int) ($maxKb / 1024) }} Mo max.)</label>
                <input type="file" id="image" name="image" accept="image/png,image/jpeg,image/gif" required>
            </div>
            <div style="flex:1;min-width:200px">
                <label for="name">Nom (facultatif)</label>
                <input type="text" id="name" name="name" maxlength="80" placeholder="ex. logo-cabm">
            </div>
            <button class="btn" type="submit">Envoyer</button>
        </form>
    </div>

    <div class="card">
        <h2>Images en ligne ({{ $images->count() }})</h2>
        <table class="list">
            <thead><tr><th style="width:150px">Aperçu</th><th>Fichier</th><th>À coller dans un template</th><th>Utilisée par</th><th></th></tr></thead>
            <tbody>
            @forelse ($images as $img)
                @php $snippet = '<img src="'.$tag('site_url').'/img/'.$img['name'].'" alt="" width="'.($img['width'] ?? '').'" style="display:block;border:0">'; @endphp
                <tr>
                    <td><img src="{{ asset('img/'.$img['name']) }}" alt="" style="max-width:140px;max-height:70px;border:1px solid var(--line);background:#fff"></td>
                    <td>
                        <a href="{{ $img['url'] }}" target="_blank" rel="noopener">{{ $img['name'] }}</a>
                        <div class="muted">{{ $img['width'] }}×{{ $img['height'] }} px · {{ $img['kb'] }} Ko
                            @if ($img['kb'] > 150) <span class="badge warn">lourde</span> @endif</div>
                    </td>
                    <td>
                        <div class="row">
                            <code style="font-size:12px;word-break:break-all">{{ $snippet }}</code>
                            <button type="button" class="btn secondary small" data-copy="{{ $snippet }}">Copier</button>
                        </div>
                    </td>
                    <td class="muted">{{ $img['used_in'] ? implode(', ', $img['used_in']) : '—' }}</td>
                    <td style="text-align:right">
                        @if ($isAdmin)
                            <form class="inline" method="post" action="{{ route('admin.images.destroy', $img['name']) }}"
                                  onsubmit="return confirm('Supprimer {{ $img['name'] }} ? Les signatures déjà envoyées qui l\'affichent ne la montreront plus.')">
                                @csrf @method('DELETE')
                                <button class="btn danger small" type="submit" @disabled($img['used_in'])>Supprimer</button>
                            </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="5" class="muted">Aucune image. Commencez par le logo (ex. logo-cabm.png, utilisé par le template par défaut).</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('click', async (e) => {
        const text = e.target.dataset && e.target.dataset.copy;
        if (!text) return;
        try { await navigator.clipboard.writeText(text); e.target.textContent = 'Copié'; }
        catch { e.target.textContent = 'Copie impossible'; }
        setTimeout(() => { e.target.textContent = 'Copier'; }, 1500);
    });
</script>
@endpush