Fix brainstorm delete and plan button

brainstorm_canvas.php

@@ -189,6 +189,12 @@ $categories = [
                 <i data-lucide="map" class="w-4 h-4"></i>
                 <span>Zet om naar Roadmap</span>
             </button>
+
+            <?php if (($currentUser['role'] ?? '') === 'ADMIN' || (int)$session['created_by_id'] === (int)$userId): ?>
+                <button onclick="promptDeleteCurrentCanvasSession()" class="p-2 rounded-xl text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10 border border-transparent hover:border-rose-200 dark:hover:border-rose-900/40 transition cursor-pointer" title="Brainstormsessie verwijderen">
+                    <i data-lucide="trash-2" class="w-4 h-4"></i>
+                </button>
+            <?php endif; ?>
         </div>
     </div>
 
@@ -783,6 +789,37 @@ $categories = [
                 </button>
             </div>
         </div>
+<!-- Modal: Sessie Verwijderen Bevestiging -->
+<div id="deleteCanvasSessionModal" onclick="if(event.target === this) closeDeleteCanvasSessionModal()" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-md w-full space-y-4">
+        <div class="flex items-start space-x-3.5 pb-2">
+            <div class="w-10 h-10 rounded-xl bg-rose-50 dark:bg-rose-500/10 border border-rose-200 dark:border-rose-500/20 text-rose-600 dark:text-rose-400 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+            </div>
+            <div>
+                <h3 class="text-base font-bold text-slate-900 dark:text-white">Brainstormsessie verwijderen</h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                    Weet u zeker dat u deze sessie wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+                </p>
+            </div>
+        </div>
+
+        <div class="p-3.5 rounded-xl bg-rose-50/60 dark:bg-rose-950/20 border border-rose-200/80 dark:border-rose-900/40 text-xs text-rose-800 dark:text-rose-300 space-y-1">
+            <p class="font-bold text-slate-900 dark:text-white"><?= htmlspecialchars($session['title']) ?></p>
+            <p class="text-[11px] text-rose-700 dark:text-rose-400">
+                Let op: Alle <?= count($cards) ?> brainstormkaart(en) en bijbehorende inhoud worden definitief verwijderd.
+            </p>
+        </div>
+
+        <div class="flex space-x-2 pt-2 border-t border-slate-100 dark:border-slate-800/80">
+            <button type="button" onclick="closeDeleteCanvasSessionModal()" class="flex-1 px-4 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-xs font-semibold transition cursor-pointer">
+                Annuleren
+            </button>
+            <button type="button" id="btnConfirmDeleteCanvasSession" onclick="executeDeleteCanvasSession()" class="flex-1 px-4 py-2.5 bg-rose-600 hover:bg-rose-500 text-white font-bold rounded-xl text-xs transition cursor-pointer shadow-xs flex items-center justify-center space-x-1.5">
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                <span>Verwijderen</span>
+            </button>
+        </div>
     </div>
 </div>
 
@@ -1745,12 +1782,60 @@ async function submitBreakdownExport() {
         if (window.lucide) lucide.createIcons();
     }
 }
+function promptDeleteCurrentCanvasSession() {
+    const modal = document.getElementById('deleteCanvasSessionModal');
+    if (modal) {
+        modal.classList.remove('hidden');
+        modal.classList.add('flex');
+    }
+    if (window.lucide) lucide.createIcons();
+}
+
+function closeDeleteCanvasSessionModal() {
+    const modal = document.getElementById('deleteCanvasSessionModal');
+    if (modal) {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+    }
+}
+
+async function executeDeleteCanvasSession() {
+    const btn = document.getElementById('btnConfirmDeleteCanvasSession');
+    const origHtml = btn.innerHTML;
+    btn.disabled = true;
+    btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i><span>Verwijderen...</span>';
+    if (window.lucide) lucide.createIcons();
+
+    try {
+        const res = await fetch('/api/brainstorm.php?action=delete_session', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ session_id: <?= (int)$sessionId ?> })
+        });
+        const data = await res.json();
+
+        if (data.success) {
+            window.location.href = '/brainstorm.php';
+        } else {
+            alert('Fout bij verwijderen: ' + (data.error || 'Onbekende fout'));
+            btn.disabled = false;
+            btn.innerHTML = origHtml;
+            if (window.lucide) lucide.createIcons();
+        }
+    } catch (err) {
+        alert('Netwerkfout bij verwijderen: ' + err.message);
+        btn.disabled = false;
+        btn.innerHTML = origHtml;
+        if (window.lucide) lucide.createIcons();
+    }
+}
 
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
         closeAddCardModal();
         closeConvertModal();
         closeAiBreakdownModal();
+        closeDeleteCanvasSessionModal();
     }
 });
 </script>