@extends('layout')
@section('title','Modifier le modèle')
@section('content')
<div class="row" style="justify-content:space-between">
    <h1>Modifier : {{ $template->name }}</h1>
    <a class="btn secondary" href="{{ route('templates.index') }}">← Retour</a>
</div>
<p class="muted">Écrivez le mail comme dans un traitement de texte ; les boutons « Insérer » ajoutent le prénom, l'email, le département ou le lien piégé.</p>

@if($aiConfigured)
    @include('admin._ai-generator', ['aiEndpoint' => route('templates.ai-generate'), 'onResult' => 'applyAiTemplate'])
@endif

<form method="post" action="{{ route('templates.update', $template) }}" data-live-preview>
    @csrf @method('PUT')
    <div class="template-split">
    <div class="card">
        <div class="row">
            <div style="flex:1"><label>Nom</label><input name="name" value="{{ old('name', $template->name) }}" required></div>
            <div style="flex:2"><label>Objet</label><input name="subject" value="{{ old('subject', $template->subject) }}" required></div>
        </div>
        <label>Contenu du mail</label>
        @include('campaigns._editor', ['initialBody' => old('body_html', $template->body_html)])

        <label style="margin-top:14px">Pièges du modèle</label>
        <div id="traps"></div>
        <button type="button" class="btn secondary" onclick="addTrap()">+ Ajouter un piège</button>
    </div>
    @include('admin._template-preview')
    </div>
    <button class="btn ok">Enregistrer</button>
    <a class="btn secondary" href="{{ route('templates.index') }}">Annuler</a>
</form>
<style>
    .template-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
    @media (max-width:1100px){.template-split{grid-template-columns:1fr}.template-split #mail-preview{position:static!important}}
</style>

<datalist id="trap-images">
    @foreach($libraryImages as $img)
        <option value="{{ $img['url'] }}">{{ $img['name'] }}</option>
    @endforeach
</datalist>

<script>
let i = 0;
const existing = @json($template->traps ?? []);
function addTrap(data){
    const n = i++;
    data = data || {type:'link', label:'', asset_url:''};
    const div = document.createElement('div');
    div.className = 'card';
    div.style.background = '#f8fafc';
    const isImg = data.type === 'image';
    div.innerHTML = `
        <div class="row" style="align-items:flex-end">
            <div style="width:80px"><label>Piège ${n+1}</label><span class="muted">trap:${n+1}</span></div>
            <div style="flex:1"><label>Type</label>
                <select name="traps[${n}][type]" onchange="toggleAsset(this, ${n})">
                    <option value="link">Lien texte</option>
                    <option value="button">Bouton</option>
                    <option value="image">Image cliquable</option>
                    <option value="qr">QR code</option>
                </select>
            </div>
            <div style="flex:1"><label>Texte / alt</label><input name="traps[${n}][label]" required value="${(data.label||'').replace(/"/g,'&quot;')}"></div>
            <div style="flex:1" id="asset-${n}" ${isImg?'':'hidden'}>
                <label>Image <span class="muted">(tape le nom, choisis dans la liste — ou <a href="{{ route('files.index') }}" target="_blank">gère la bibliothèque</a>)</span></label>
                <input type="text" list="trap-images" autocomplete="off" name="traps[${n}][asset_url]" value="${data.asset_url||''}" placeholder="ex. logo-office365.png" oninput="previewAsset(this, ${n})">
                <img id="preview-${n}" src="${data.asset_url||''}" style="max-height:60px;margin-top:6px;${data.asset_url?'':'display:none'}" onerror="this.style.display='none'" onload="this.style.display='inline-block'">
            </div>
            <button type="button" class="btn danger" onclick="this.closest('.card').remove()">×</button>
        </div>`;
    document.getElementById('traps').appendChild(div);
    div.querySelector('select').value = data.type;
}
function toggleAsset(sel, n){ document.getElementById('asset-'+n).hidden = sel.value !== 'image'; }
function previewAsset(input, n){
    const img = document.getElementById('preview-'+n);
    img.style.display = input.value ? 'inline-block' : 'none';
    img.src = input.value;
}
if (existing.length) { existing.forEach(t => addTrap(t)); } else { addTrap(); }

function applyAiTemplate(data){
    if (data.name) document.querySelector('input[name="name"]').value = data.name;
    document.querySelector('input[name="subject"]').value = data.subject || '';
    quill.setText('');
    if (data.body_html) quill.clipboard.dangerouslyPasteHTML(data.body_html);
    document.getElementById('traps').innerHTML = '';
    i = 0;
    if (data.traps && data.traps.length) { data.traps.forEach(t => addTrap(t)); } else { addTrap(); }
}
</script>
@endsection