@extends('layout')
@section('title','Nouvelle campagne')
@section('content')
<h1>Nouvelle campagne</h1>
<form method="post" action="{{ route('campaigns.store') }}">
    @csrf
    <div class="card">
        <h2>Paramètres</h2>
        @if($templates->isNotEmpty())
            <label>Partir d'un modèle (optionnel)</label>
            <select id="tplSelect">
                <option value="">— aucun —</option>
                @foreach($templates as $t)<option value="{{ $t->id }}">{{ $t->name }}</option>@endforeach
            </select>
            <p class="muted">Pré-remplit l'objet et le contenu ci-dessous.</p>
        @endif
        <div class="row">
            <div style="flex:1"><label>Nom interne</label><input name="name" value="{{ old('name') }}" required></div>
            <div style="flex:1"><label>Sujet du mail</label><input name="subject" value="{{ old('subject') }}" required></div>
        </div>
        <div class="row">
            <div style="flex:1"><label>Nom expéditeur</label><input name="from_name" value="{{ old('from_name') }}" required></div>
            <div style="flex:1"><label>Email expéditeur</label><input type="email" name="from_email" value="{{ old('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')==$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>. Permet d'envoyer différentes campagnes depuis différents domaines.</p>
        <label>URL cachée (destination commune à tous les pièges)</label>
        <input type="url" name="landing_url" value="{{ old('landing_url') }}" placeholder="Laisser vide = page de sensibilisation intégrée">
        <p class="muted">Tous les pièges du mail redirigent vers cette URL unique. 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')) 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')) 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')==$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>
    </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. Modifiable à tout moment depuis la page de la campagne.
        </p>
        @include('campaigns._audience-fields', ['target' => null])
    </div>

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

    <div class="card">
        <h2>Pièges</h2>
        <p class="muted">Un mail peut contenir plusieurs pièges (lien, bouton, image). Ils pointent tous vers la même URL cachée ; chaque clic est attribué au piège précis.</p>
        <div id="traps"></div>
        <button type="button" class="btn secondary" onclick="addTrap()">+ Ajouter un piège</button>
    </div>

    <button class="btn ok">Créer la campagne</button>
    <a class="btn secondary" href="{{ route('campaigns.index') }}">Annuler</a>
</form>

<script>
let i = 0;
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>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 = ''; }
addTrap();

// Template prefill: fills subject + Quill body + rebuilds the trap rows.
// Everything stays editable on this campaign (the template is not modified).
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