From cc750fcb1e617a99987f721e535a877ba6236500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Thu, 30 Jul 2026 17:37:42 +0300
Subject: [PATCH] feat: add SortableJS and wrap kanban initialization in a
 robustness handler for delayed script loading

---
 resources/views/projects/show.blade.php | 98 ++++++++++++++-----------
 1 file changed, 57 insertions(+), 41 deletions(-)

diff --git a/resources/views/projects/show.blade.php b/resources/views/projects/show.blade.php
index 1a2c3ad..62858dc 100644
--- a/resources/views/projects/show.blade.php
+++ b/resources/views/projects/show.blade.php
@@ -15,6 +15,9 @@
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     
+    <!-- Sortable JS for Drag and Drop -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
+    
     <script>
         tailwind.config = {
             darkMode: 'class',
@@ -860,52 +863,65 @@ gantt
         }
 
         // Sortable.js Drag and Drop Setup for 4 Kanban Columns
-        document.querySelectorAll('.kanban-drop-zone').forEach(zone => {
-            new Sortable(zone, {
-                group: 'kanban-board',
-                animation: 200,
-                ghostClass: 'sortable-ghost',
-                dragClass: 'sortable-drag',
-                onEnd: function(evt) {
-                    const itemEl = evt.item;
-                    const targetZone = evt.to;
-                    const taskId = itemEl.getAttribute('data-task-id');
-                    const newStatus = targetZone.getAttribute('data-status');
+        function initKanbanSortable() {
+            if (typeof Sortable === 'undefined') {
+                setTimeout(initKanbanSortable, 100);
+                return;
+            }
 
-                    if (!taskId || !newStatus) return;
+            document.querySelectorAll('.kanban-drop-zone').forEach(zone => {
+                new Sortable(zone, {
+                    group: 'kanban-board',
+                    animation: 200,
+                    ghostClass: 'sortable-ghost',
+                    dragClass: 'sortable-drag',
+                    onEnd: function(evt) {
+                        const itemEl = evt.item;
+                        const targetZone = evt.to;
+                        const taskId = itemEl.getAttribute('data-task-id');
+                        const newStatus = targetZone.getAttribute('data-status');
 
-                    fetch('{{ route("projects.admin.task-status", $project->slug) }}', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
-                            'Accept': 'application/json',
-                            'X-Requested-With': 'XMLHttpRequest'
-                        },
-                        body: JSON.stringify({
-                            task_id: taskId,
-                            status: newStatus
+                        if (!taskId || !newStatus) return;
+
+                        fetch('{{ route("projects.admin.task-status", $project->slug) }}', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+                                'Accept': 'application/json',
+                                'X-Requested-With': 'XMLHttpRequest'
+                            },
+                            body: JSON.stringify({
+                                task_id: taskId,
+                                status: newStatus
+                            })
                         })
-                    })
-                    .then(res => res.json())
-                    .then(data => {
-                        if (data.success) {
-                            updateProgressUI(data.progress_percent);
-                            if (data.counts) {
-                                updateCountsUI(data.counts);
+                        .then(res => res.json())
+                        .then(data => {
+                            if (data.success) {
+                                updateProgressUI(data.progress_percent);
+                                if (data.counts) {
+                                    updateCountsUI(data.counts);
+                                }
+                                showToast(data.message, 'success');
+                            } else {
+                                showToast('Görev taşınamadı.', 'error');
                             }
-                            showToast(data.message, 'success');
-                        } else {
-                            showToast('Görev taşınamadı.', 'error');
-                        }
-                    })
-                    .catch(err => {
-                        console.error('AJAX Error:', err);
-                        showToast('Bağlantı hatası.', 'error');
-                    });
-                }
+                        })
+                        .catch(err => {
+                            console.error('AJAX Error:', err);
+                            showToast('Bağlantı hatası.', 'error');
+                        });
+                    }
+                });
             });
-        });
+        }
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', initKanbanSortable);
+        } else {
+            initKanbanSortable();
+        }
 
         // AJAX Module Status Toggle Handler
         function setModuleStatusAjax(moduleId, status) {