@extends('layouts.admin')

@section('title', 'Kirim Pesan')

@section('content')
{{-- Connection Status --}}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-100 p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-indigo-50 rounded-lg flex items-center justify-center">
                    <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91A2.25 2.25 0 012.25 6.993V6.75"/></svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-800">SMTP Email</p>
                    <p class="text-xs text-gray-400">{{ $config['smtp']['host'] ?: 'Belum diset' }} : {{ $config['smtp']['port'] ?: '-' }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span id="smtp-status" class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-500">-</span>
                <button onclick="testSmtp()" class="text-xs text-indigo-600 hover:underline">Cek</button>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-green-50 rounded-lg flex items-center justify-center">
                    <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-800">WhatsApp Fonnte</p>
                    <p class="text-xs text-gray-400">Sumber: {{ $config['fonnte']['key_source'] }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span id="fonnte-status" class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-500">-</span>
                <button onclick="testFonnte()" class="text-xs text-green-600 hover:underline">Cek</button>
            </div>
        </div>
    </div>
</div>

{{-- Variable Reference + Template Loader --}}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-100 p-4">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-sm font-semibold text-gray-800 flex items-center gap-1.5">
                <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
                Variabel yang Tersedia
            </h3>
            <button onclick="document.getElementById('var-table').classList.toggle('hidden')" class="text-xs text-indigo-600 hover:underline">Toggle</button>
        </div>
        <div id="var-table" class="flex flex-wrap gap-1.5">
            @foreach($availableVariables as $var => $desc)
            <button type="button" onclick="copyVariable('{{ $var }}')"
                class="inline-flex items-center gap-1 px-2.5 py-1 bg-indigo-50 text-indigo-700 text-xs rounded-lg font-mono hover:bg-indigo-100 group" title="{{ $desc }}">
                <span>{{ '{' . $var . '}' }}</span>
                <svg class="w-3 h-3 opacity-0 group-hover:opacity-100" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"/></svg>
            </button>
            @endforeach
        </div>
        <div id="copy-toast" class="hidden mt-2 text-xs text-green-600 font-medium"></div>
    </div>
    <div class="bg-white rounded-xl border border-orange-100 p-4">
        <h3 class="text-sm font-semibold text-gray-800 mb-2 flex items-center gap-1.5">
            <svg class="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"/></svg>
            Broadcast Template
        </h3>
        <p class="text-xs text-gray-400 mb-2">Muat template untuk broadcast Email & WhatsApp sekaligus.</p>
        <select id="broadcast-template-select" onchange="loadBroadcastTemplate()"
            class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-orange-500 outline-none mb-3">
            <option value="">-- Tulis manual --</option>
            @foreach($templates as $t)
            <option value="{{ $t->id }}" data-subject="{{ $t->email_subject }}" data-email-body="{{ $t->email_body }}" data-wa-body="{{ $t->wa_body }}">{{ $t->label }}</option>
            @endforeach
        </select>
        <div class="bg-orange-50 border border-orange-200 rounded-lg p-2.5">
            <p class="text-xs text-orange-700">
                <strong>Perhatian:</strong> Broadcast mengirim pesan ke <strong>semua pelamar</strong>. Variabel <code class="bg-orange-100 px-1 rounded">{applicant_name}</code> akan diganti otomatis.
            </p>
        </div>
    </div>
</div>

{{-- Main 2x2 Grid --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {{-- Send Email --}}
    <div class="bg-white rounded-xl border border-gray-100 p-5 sm:p-6">
        <div class="flex items-center gap-2 mb-4">
            <div class="w-8 h-8 bg-indigo-50 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91A2.25 2.25 0 012.25 6.993V6.75"/></svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-800">Kirim Email</h3>
        </div>

        <div class="mb-4">
            <label class="block text-xs font-medium text-gray-500 mb-1">Muat dari Template</label>
            <select id="email-template-select" onchange="loadTemplate('email')"
                class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                <option value="">-- Tulis manual --</option>
                @foreach($templates as $t)
                <option value="{{ $t->id }}" data-subject="{{ $t->email_subject }}" data-body="{{ $t->email_body }}">{{ $t->label }}</option>
                @endforeach
            </select>
        </div>

        <form id="form-email" class="space-y-3">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email Tujuan</label>
                <input type="email" name="email" required placeholder="contoh@email.com"
                    class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                <input type="text" name="subject" id="email-subject" required placeholder="Subject email"
                    class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Isi Pesan (HTML diizinkan)</label>
                <textarea name="message" id="email-body" rows="5" required placeholder="Tulis pesan email di sini..."
                    class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none font-mono"></textarea>
            </div>
            <button type="submit" id="btn-send-email"
                class="w-full bg-indigo-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-indigo-700">
                Kirim Email
            </button>
        </form>
        <div id="email-result" class="mt-3 hidden p-3 rounded-lg text-sm"></div>
    </div>

    {{-- Send WhatsApp --}}
    <div class="bg-white rounded-xl border border-gray-100 p-5 sm:p-6">
        <div class="flex items-center gap-2 mb-4">
            <div class="w-8 h-8 bg-green-50 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-800">Kirim WhatsApp</h3>
        </div>

        <div class="mb-4">
            <label class="block text-xs font-medium text-gray-500 mb-1">Muat dari Template</label>
            <select id="wa-template-select" onchange="loadTemplate('wa')"
                class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 outline-none">
                <option value="">-- Tulis manual --</option>
                @foreach($templates as $t)
                <option value="{{ $t->id }}" data-body="{{ $t->wa_body }}">{{ $t->label }}</option>
                @endforeach
            </select>
        </div>

        <form id="form-wa" class="space-y-3">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nomor WhatsApp</label>
                <input type="text" name="phone" required placeholder="08xxxxxxxxxx"
                    class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Isi Pesan</label>
                <textarea name="message" id="wa-body" rows="5" required placeholder="Tulis pesan WhatsApp di sini..."
                    class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-green-500 outline-none"></textarea>
            </div>
            <button type="submit" id="btn-send-wa"
                class="w-full bg-green-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-green-700">
                Kirim WhatsApp
            </button>
        </form>
        <div id="wa-result" class="mt-3 hidden p-3 rounded-lg text-sm"></div>
    </div>

    {{-- Broadcast Email --}}
    <div class="bg-white rounded-xl border border-orange-200 p-5 sm:p-6">
        <div class="flex items-center gap-2 mb-4">
            <div class="w-8 h-8 bg-orange-50 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91A2.25 2.25 0 012.25 6.993V6.75"/></svg>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-800">Broadcast Email</h3>
                <p class="text-xs text-gray-400">Kirim ke semua pelamar terdaftar</p>
            </div>
        </div>

        <form id="form-broadcast-email" class="space-y-3">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                <input type="text" name="subject" id="broadcast-email-subject" required placeholder="Subject email broadcast"
                    class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-orange-500 outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Isi Pesan (HTML diizinkan)</label>
                <textarea name="message" id="broadcast-email-body" rows="5" required placeholder="Tulis pesan broadcast email..."
                    class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-orange-500 outline-none font-mono"></textarea>
            </div>
            <button type="submit" id="btn-broadcast-email"
                class="w-full bg-orange-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-orange-700">
                Broadcast Email
            </button>
        </form>
        <div id="broadcast-email-result" class="mt-3 hidden p-3 rounded-lg text-sm"></div>
    </div>

    {{-- Broadcast WhatsApp --}}
    <div class="bg-white rounded-xl border border-orange-200 p-5 sm:p-6">
        <div class="flex items-center gap-2 mb-4">
            <div class="w-8 h-8 bg-green-50 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.75.75 0 00.917.918l4.462-1.494A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.319 0-4.476-.668-6.305-1.812l-.44-.263-3.035 1.015 1.017-3.038-.27-.447A9.955 9.955 0 012 12C2 6.486 6.486 2 12 2s10 4.486 10 10-4.486 10-10 10z"/></svg>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-800">Broadcast WhatsApp</h3>
                <p class="text-xs text-gray-400">Kirim ke semua pelamar terdaftar</p>
            </div>
        </div>

        <form id="form-broadcast-wa" class="space-y-3">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Isi Pesan</label>
                <textarea name="message" id="broadcast-wa-body" rows="5" required placeholder="Tulis pesan broadcast WhatsApp..."
                    class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-orange-500 outline-none"></textarea>
            </div>
            <button type="submit" id="btn-broadcast-wa"
                class="w-full bg-orange-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-orange-700">
                Broadcast WhatsApp
            </button>
        </form>
        <div id="broadcast-wa-result" class="mt-3 hidden p-3 rounded-lg text-sm"></div>
    </div>
</div>

@push('scripts')
<script>
const csrfToken = '{{ csrf_token() }}';

function copyVariable(varName) {
    const text = '{' + varName + '}';
    navigator.clipboard.writeText(text).then(() => {
        const toast = document.getElementById('copy-toast');
        toast.textContent = text + ' disalin!';
        toast.classList.remove('hidden');
        setTimeout(() => toast.classList.add('hidden'), 1500);
    });
}

function loadTemplate(type) {
    if (type === 'email') {
        const select = document.getElementById('email-template-select');
        const opt = select.options[select.selectedIndex];
        if (opt.value) {
            document.getElementById('email-subject').value = opt.dataset.subject || '';
            document.getElementById('email-body').value = opt.dataset.body || '';
        }
    } else {
        const select = document.getElementById('wa-template-select');
        const opt = select.options[select.selectedIndex];
        if (opt.value) {
            document.getElementById('wa-body').value = opt.dataset.body || '';
        }
    }
}

function showResult(elId, success, message) {
    const el = document.getElementById(elId);
    el.classList.remove('hidden');
    el.className = `mt-3 p-3 rounded-lg text-sm ${success ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-red-50 border border-red-200 text-red-700'}`;
    el.textContent = message;
}

function setStatus(elId, success, label) {
    const el = document.getElementById(elId);
    el.className = `px-2 py-0.5 text-xs font-medium rounded-full ${success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`;
    el.textContent = label || (success ? 'OK' : 'Gagal');
}

async function testSmtp() {
    document.getElementById('smtp-status').textContent = '...';
    try {
        const res = await fetch('{{ route("admin.send-message.test-smtp") }}', {
            method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
        });
        const data = await res.json();
        setStatus('smtp-status', data.success, data.success ? 'Terhubung' : 'Gagal');
    } catch (e) {
        setStatus('smtp-status', false, 'Error');
    }
}

async function testFonnte() {
    document.getElementById('fonnte-status').textContent = '...';
    try {
        const res = await fetch('{{ route("admin.send-message.test-fonnte") }}', {
            method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
        });
        const data = await res.json();
        setStatus('fonnte-status', data.success, data.success ? 'Terhubung' : 'Gagal');
    } catch (e) {
        setStatus('fonnte-status', false, 'Error');
    }
}

document.getElementById('form-email').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('btn-send-email');
    btn.disabled = true; btn.textContent = 'Mengirim...';
    try {
        const formData = new FormData(this);
        const res = await fetch('{{ route("admin.send-message.email") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify(Object.fromEntries(formData)),
        });
        const data = await res.json();
        showResult('email-result', data.success, data.message);
    } catch (e) {
        showResult('email-result', false, 'Network error: ' + e.message);
    }
    btn.disabled = false; btn.textContent = 'Kirim Email';
});

document.getElementById('form-wa').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('btn-send-wa');
    btn.disabled = true; btn.textContent = 'Mengirim...';
    try {
        const formData = new FormData(this);
        const res = await fetch('{{ route("admin.send-message.whatsapp") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify(Object.fromEntries(formData)),
        });
        const data = await res.json();
        showResult('wa-result', data.success, data.message);
    } catch (e) {
        showResult('wa-result', false, 'Network error: ' + e.message);
    }
    btn.disabled = false; btn.textContent = 'Kirim WhatsApp';
});

// Auto-check connections on load
window.addEventListener('load', () => {
    setTimeout(testSmtp, 300);
    setTimeout(testFonnte, 600);
});

function loadBroadcastTemplate() {
    const select = document.getElementById('broadcast-template-select');
    const opt = select.options[select.selectedIndex];
    if (opt.value) {
        document.getElementById('broadcast-email-subject').value = opt.dataset.subject || '';
        document.getElementById('broadcast-email-body').value = opt.dataset.emailBody || '';
        document.getElementById('broadcast-wa-body').value = opt.dataset.waBody || '';
    }
}

document.getElementById('form-broadcast-email').addEventListener('submit', async function(e) {
    e.preventDefault();
    if (!confirm('Apakah Anda yakin ingin mengirim email broadcast ke SEMUA pelamar?')) return;
    const btn = document.getElementById('btn-broadcast-email');
    btn.disabled = true; btn.textContent = 'Mengirim broadcast...';
    try {
        const formData = new FormData(this);
        const res = await fetch('{{ route("admin.send-message.broadcast-email") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify(Object.fromEntries(formData)),
        });
        const data = await res.json();
        showResult('broadcast-email-result', data.success, data.message);
    } catch (e) {
        showResult('broadcast-email-result', false, 'Network error: ' + e.message);
    }
    btn.disabled = false; btn.textContent = 'Broadcast Email ke Semua Pelamar';
});

document.getElementById('form-broadcast-wa').addEventListener('submit', async function(e) {
    e.preventDefault();
    if (!confirm('Apakah Anda yakin ingin mengirim WhatsApp broadcast ke SEMUA pelamar? Proses ini bisa memakan waktu lama.')) return;
    const btn = document.getElementById('btn-broadcast-wa');
    btn.disabled = true; btn.textContent = 'Mengirim broadcast...';
    try {
        const formData = new FormData(this);
        const res = await fetch('{{ route("admin.send-message.broadcast-whatsapp") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify(Object.fromEntries(formData)),
        });
        const data = await res.json();
        showResult('broadcast-wa-result', data.success, data.message);
    } catch (e) {
        showResult('broadcast-wa-result', false, 'Network error: ' + e.message);
    }
    btn.disabled = false; btn.textContent = 'Broadcast WhatsApp ke Semua Pelamar';
});
</script>
@endpush
@endsection