@extends('layout')
@section('title','Modifier la campagne')
@section('content')
<h1>Modifier : {{ $campaign->name }}</h1>
<form method="post" action="{{ route('campaigns.update', $campaign) }}">
    @csrf
    @method('PUT')
    <div class="card">
        <h2>Paramètres</h2>
        <div class="row">
            <div style="flex:1"><label>Nom interne</label><input name="name" value="{{ old('name', $campaign->name) }}" required></div>
            <div style="flex:1"><label>Sujet du mail</label><input name="subject" value="{{ old('subject', $campaign->subject) }}" required></div>
        </div>
        <div class="row">
            <div style="flex:1"><label>Nom expéditeur</label><input name="from_name" value="{{ old('from_name', $campaign->from_name) }}" required></div>
            <div style="flex:1"><label>Email expéditeur</label><input type="email" name="from_email" value="{{ old('from_email', $campaign->from_email) }}" required></div>
        </div>
        <label>Profil d'envoi (SMTP)</label>
        <select name="mail_profile_id">
            <option value="">— profil par défaut —</option>
            @foreach($mailProfiles as $mp)
                <option value="{{ $mp->id }}" @selected(old('mail_profile_id', $campaign->mail_profile_id)==$mp->id)>{{ $mp->name }} ({{ $mp->smtp_host }})</option>
            @endforeach
        </select>
        <p class="muted">Gérés dans <a href="{{ route('settings.edit') }}" target="_blank">Configuration → Réglages</a>.</p>
        <label>URL cachée (destination commune à tous les pièges)</label>
        <input type="url" name="landing_url" value="{{ old('landing_url', $campaign->landing_url) }}" placeholder="Laisser vide = page de sensibilisation intégrée">
        <p class="muted">Vide → page « Vous avez été piégé » interne.</p>
        <label style="font-weight:500"><input type="checkbox" name="capture_login" id="capture-login-cb" value="1" style="width:auto" @checked(old('capture_login', $campaign->capture_login)) onchange="document.getElementById('landing-page-picker').hidden=!this.checked">
            Afficher une <strong>fausse page de connexion</strong> au clic (enregistre la soumission — le mot de passe n'est jamais stocké)</label>
        <div id="landing-page-picker" @if(!old('capture_login', $campaign->capture_login)) hidden @endif>
            <label>Landing page</label>
            <select name="landing_page_id">
                <option value="">— page par défaut (Microsoft 365) —</option>
                @foreach($landingPages as $lp)
                    <option value="{{ $lp->id }}" @selected(old('landing_page_id', $campaign->landing_page_id)==$lp->id)>{{ $lp->name }}</option>
                @endforeach
            </select>
            <p class="muted">Gérées dans <a href="{{ route('landing-pages.index') }}" target="_blank">Modèles → Landing pages</a>.</p>
        </div>
        @if($templates->isNotEmpty())
            <label style="margin-top:12px">Importer un modèle (remplace objet, contenu et pièges — modifiable ensuite)</label>
            <select id="tplSelect">
                <option value="">— ne rien importer —</option>
                @foreach($templates as $t)<option value="{{ $t->id }}">{{ $t->name }}</option>@endforeach
            </select>
        @endif
    </div>

    <div class="card">
        <h2>Destinataires</h2>
        <p class="muted" style="margin-top:0">
            Compose la cible en choisissant librement à chaque niveau : une entité entière, quelques départements,
            des projets précis, et/ou des personnes nommément — tout ce qui est coché s'additionne. Rien de coché =
            tous les employés actifs.
        </p>
        @include('campaigns._audience-fields', ['target' => $campaign->target])
    </div>

    <div class="card">
        <h2>Contenu du mail</h2>
        @include('campaigns._editor', ['initialBody' => old('body_html', $campaign->body_html)])
    </div>

    <div class="card">
        <h2>Pièges</h2>
        <div id="traps"></div>
        <button type="button" class="btn secondary" onclick="addTrap()">+ Ajouter un piège</button>
    </div>

    <button class="btn ok">Enregistrer</button>
    <a class="btn secondary" href="{{ route('campaigns.show', $campaign) }}">Annuler</a>
</form>

<script>
let i = 0;
const existing = @json($trapsData);
function addTrap(data){
    const n = i++;
    data = data || {type:'link', label:'', asset_url:'', id:''};
    const div = document.createElement('div');
    div.className = 'card';
    div.style.background = '#f8fafc';
    const isImg = data.type === 'image';
    const idField = data.id ? `<input type="hidden" name="traps[${n}][id]" value="${data.id}">` : '';
    div.innerHTML = `
        ${idField}
        <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>URL de l'image</label><input type="url" name="traps[${n}][asset_url]" value="${data.asset_url||''}"></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 clearTraps(){ document.getElementById('traps').innerHTML = ''; }
if (existing.length) { existing.forEach(t => addTrap(t)); } else { addTrap(); }

// Import a template into THIS campaign (temporary — the template is untouched).
const templates = @json($templates->keyBy('id')->map(fn($t) => ['subject' => $t->subject, 'body' => $t->body_html, 'traps' => $t->traps ?? []]));
const tplSelect = document.getElementById('tplSelect');
if (tplSelect) {
    tplSelect.addEventListener('change', function () {
        const t = templates[this.value];
        if (!t) return;
        document.querySelector('input[name="subject"]').value = t.subject;
        if (typeof quill !== 'undefined') { quill.setText(''); quill.clipboard.dangerouslyPasteHTML(t.body); }
        clearTraps();
        if (t.traps && t.traps.length) { t.traps.forEach(tr => addTrap(tr)); } else { addTrap(); }
    });
}
</script>
@endsection