{{-- Modal de outreach reutilizable (planilla + tablero).
     Trigger: cualquier botón con clase .outreach-open-btn + data-missile-id / data-missile-name.
     Carga el panel vía AJAX (GET /reseller/missiles/{id}/outreach) y maneja submit/delete. --}}
<div class="modal fade" id="outreachModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-comments text-primary me-1"></i>
                    Outreach: <span id="outreachModalTitle"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="outreachModalBody">
                <div class="text-center py-5">
                    <i class="fas fa-spinner fa-spin fs-2 text-muted"></i>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // ════════ Outreach modal (compartido) ════════
    (function () {
        const modal = document.getElementById('outreachModal');
        if (!modal || modal.dataset.bound) return;
        modal.dataset.bound = '1';
        const body  = document.getElementById('outreachModalBody');
        const title = document.getElementById('outreachModalTitle');
        const bs    = new bootstrap.Modal(modal);
        let currentMissileId = null;

        async function loadPanel(missileId) {
            currentMissileId = missileId;
            body.innerHTML = '<div class="text-center py-5"><i class="fas fa-spinner fa-spin fs-2 text-muted"></i></div>';
            try {
                const r = await fetch(`/reseller/missiles/${missileId}/outreach`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                });
                const data = await r.json();
                if (data.ok) body.innerHTML = data.html;
            } catch (e) { console.error(e); body.innerHTML = '<div class="alert alert-danger">Error al cargar.</div>'; }
        }

        document.addEventListener('click', e => {
            const btn = e.target.closest('.outreach-open-btn');
            if (!btn) return;
            title.textContent = btn.getAttribute('data-missile-name') || '';
            bs.show();
            loadPanel(btn.getAttribute('data-missile-id'));
        });

        document.addEventListener('submit', async e => {
            if (e.target.id !== 'outreachForm') return;
            e.preventDefault();
            const form = e.target;
            const missileId = form.getAttribute('data-missile-id');
            const submitBtn = form.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            const orig = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            try {
                const fd = new FormData(form);
                fd.append('_token', document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}');
                const r = await fetch(`/reseller/missiles/${missileId}/outreach`, {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                    body: fd,
                });
                const data = await r.json();
                if (!data.ok) { alert(data.error || 'No se pudo guardar.'); }
                else { await loadPanel(missileId); }
            } catch (err) { console.error(err); alert('Error de red.'); }
            finally { submitBtn.disabled = false; submitBtn.innerHTML = orig; }
        });

        document.addEventListener('click', async e => {
            const btn = e.target.closest('.outreach-delete-btn');
            if (!btn) return;
            if (!confirm('¿Borrar este intento?')) return;
            const id = btn.getAttribute('data-attempt-id');
            try {
                const fd = new FormData();
                fd.append('_token', document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}');
                fd.append('_method', 'DELETE');
                const r = await fetch(`/reseller/missiles/outreach/${id}`, {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                    body: fd,
                });
                const data = await r.json();
                if (data.ok && currentMissileId) loadPanel(currentMissileId);
            } catch (err) { console.error(err); }
        });
    })();
</script>
@endpush