<?php
    $firstWorkspace = $workspaces->first();
    $currentWorkspace = $firstWorkspace ? $workspaces->firstWhere('id', request('workspace_id', $firstWorkspace->id)) : null;
    $columns = $currentWorkspace ? $currentWorkspace->kanbanColumns : collect();
?>

<div class="flex gap-6 overflow-x-auto pb-8 min-h-[calc(100dvh-250px)] px-2 premium-scrollbar snap-x snap-mandatory" 
     x-ref="kanbanContainer"
     x-data="{
        newColumnName: '',
        isAddingColumn: false,
        editingColumnId: null,
        addColumn() {
            if (!this.newColumnName) return;
            fetch('<?php echo e(route('kanban-columns.store')); ?>', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>' },
                body: JSON.stringify({ workspace_id: <?php echo e($currentWorkspace->id ?? 0); ?>, name: this.newColumnName })
            }).then(() => window.location.reload());
        },
        deleteColumn(id) {
            if (!confirm('Are you sure? Tasks in this column will be uncategorized.')) return;
            fetch('<?php echo e(url('kanban-columns')); ?>/' + id, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>' }
            }).then(() => window.location.reload());
        },
        renameColumn(id, name) {
            fetch('<?php echo e(url('kanban-columns')); ?>/' + id, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>' },
                body: JSON.stringify({ name: name })
            }).then(() => window.location.reload());
        },
        moveColumn(id, direction) {
            const container = this.$refs.kanbanContainer;
            const columns = Array.from(container.querySelectorAll('.kanban-column'));
            const ids = columns.map(c => parseInt(c.dataset.id));
            const targetId = parseInt(id);
            const currentIndex = ids.indexOf(targetId);
            
            if (currentIndex === -1) return;

            if (direction === 'left' && currentIndex > 0) {
                [ids[currentIndex], ids[currentIndex - 1]] = [ids[currentIndex - 1], ids[currentIndex]];
            } else if (direction === 'right' && currentIndex < ids.length - 1) {
                [ids[currentIndex], ids[currentIndex + 1]] = [ids[currentIndex + 1], ids[currentIndex]];
            } else {
                return;
            }

            const payload = ids.map((id, index) => ({ id, order_index: index }));
            
            axios.patch('<?php echo e(route('kanban-columns.reorder')); ?>', { columns: payload })
                .then(() => window.location.reload())
                .catch(err => {
                    console.error('Move error:', err);
                    window.dispatchEvent(new CustomEvent('notify', { detail: { message: 'Failed to move column', type: 'error' } }));
                });
        }
     }">
     
    <?php $__currentLoopData = $columns; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $column): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="flex-shrink-0 w-[85vw] sm:w-[320px] flex flex-col snap-center group/column kanban-column" data-id="<?php echo e($column->id); ?>">
            
            <!-- Column Header (Elegant Minimalist) -->
            <div class="mb-5 px-5 py-3.5 bg-white/60 dark:bg-slate-900/60 backdrop-blur-3xl border border-slate-200 dark:border-slate-800 rounded-2xl flex items-center justify-between shadow-sm sticky top-0 z-10 transition-all duration-300">
                <div class="flex items-center gap-3 overflow-hidden">
                    <div class="w-2.5 h-2.5 rounded-full shrink-0 shadow-[0_0_8px_rgba(var(--primary-500),0.4)]" style="background-color: <?php echo e($column->color ?? '#6366f1'); ?>"></div>
                    <div x-data="{ editing: false, name: '<?php echo e($column->name); ?>' }" class="flex-1">
                        <h3 x-show="!editing" @click="editing = true" class="font-black text-slate-700 dark:text-slate-200 text-[10px] uppercase tracking-[0.15em] cursor-pointer hover:text-primary-600 truncate"><?php echo e($column->name); ?></h3>
                        <input x-show="editing" x-model="name" @blur="editing = false; $root.renameColumn(<?php echo e($column->id); ?>, name)" @keydown.enter="editing = false; $root.renameColumn(<?php echo e($column->id); ?>, name)" class="bg-transparent border-none p-0 text-[10px] font-black uppercase tracking-[0.15em] text-primary-600 focus:ring-0 w-full">
                    </div>
                </div>
                
                <div class="flex items-center gap-2">
                    <!-- Move Arrows -->
                    <div class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-lg p-0.5 opacity-0 group-hover/column:opacity-100 transition-all">
                        <button @click="moveColumn(<?php echo e($column->id); ?>, 'left')" class="p-1 hover:text-primary-600 transition-colors text-slate-400" title="Move Left">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path></svg>
                        </button>
                        <div class="w-px h-3 bg-slate-200 dark:bg-slate-700"></div>
                        <button @click="moveColumn(<?php echo e($column->id); ?>, 'right')" class="p-1 hover:text-primary-600 transition-colors text-slate-400" title="Move Right">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </div>

                    <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded-lg">
                        <?php echo e($tasks->where('kanban_column_id', $column->id)->count()); ?>

                    </span>
                    
                    <button @click="deleteColumn(<?php echo e($column->id); ?>)" class="opacity-0 group-hover/column:opacity-100 p-1 hover:text-red-500 transition-all text-slate-400">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                    </button>
                </div>
            </div>
            
            <!-- Cards Lane -->
            <div
                class="flex-1 space-y-4 p-1 min-h-[200px]"
                x-ref="kanban_<?php echo e($column->id); ?>"
                data-column-id="<?php echo e($column->id); ?>"
            >
                <?php $__empty_1 = true; $__currentLoopData = $tasks->where('kanban_column_id', $column->id); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $task): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div
                        class="group bg-white/70 dark:bg-slate-800/50 backdrop-blur-xl p-5 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-sm cursor-grab active:cursor-grabbing hover:shadow-2xl hover:shadow-primary-500/10 hover:-translate-y-1 hover:border-primary-500/30 transition-all duration-500 relative overflow-hidden"
                        data-id="<?php echo e($task->id); ?>"
                        @click="openEditModal(<?php echo e(json_encode($task)); ?>)"
                    >
                        <!-- Top Accent Line -->
                        <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-transparent via-primary-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                        <div class="flex flex-col gap-3">
                            <!-- Card Header -->
                            <div class="flex items-start justify-between gap-2">
                                <h4 class="font-bold text-slate-800 dark:text-slate-100 text-sm leading-snug tracking-tight group-hover:text-primary-600 transition-colors"><?php echo e($task->title); ?></h4>
                                <button 
                                    @click.stop="toggleComplete(<?php echo e($task->id); ?>, !<?php echo e($task->is_completed ? 'true' : 'false'); ?>)" 
                                    class="flex-shrink-0 w-6 h-6 rounded-lg border-2 border-slate-200 dark:border-slate-700 transition-all flex items-center justify-center <?php echo e($task->is_completed ? 'bg-emerald-500 border-emerald-500 text-white shadow-lg shadow-emerald-500/30' : 'hover:border-primary-500 text-transparent hover:text-primary-500/30'); ?>"
                                >
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="4"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
                                </button>
                            </div>
                            
                            <!-- Description Preview -->
                            <?php if($task->description): ?>
                                <p class="text-[11px] font-medium text-slate-500 dark:text-slate-400 line-clamp-2 leading-relaxed opacity-80">
                                    <?php echo e(strip_tags($task->description)); ?>

                                </p>
                            <?php endif; ?>

                            <!-- Meta & Footer -->
                            <div class="flex items-center justify-between mt-2 pt-4 border-t border-slate-100 dark:border-slate-700/50">
                                <div class="flex items-center gap-2">
                                    <div class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-700 text-[10px] font-bold <?php echo e($task->due_date && $task->due_date->isPast() ? 'text-red-500' : 'text-slate-400 dark:text-slate-500'); ?>">
                                        <?php echo e($task->due_date ? $task->due_date->format('M d') : 'No Date'); ?>

                                    </div>

                                    <?php if($task->children->count() > 0): ?>
                                        <div class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-primary-50 dark:bg-primary-500/10 text-[10px] font-bold text-primary-600 dark:text-primary-400">
                                            <span><?php echo e($task->progress); ?>%</span>
                                        </div>
                                    <?php endif; ?>
                                </div>

                                <div class="relative">
                                    <?php if($task->assignee): ?>
                                        <img src="https://ui-avatars.com/api/?name=<?php echo e(urlencode($task->assignee->name)); ?>&background=F1F5F9&color=64748B&size=24" class="w-6 h-6 rounded-full border border-white dark:border-slate-700 shadow-sm" alt="">
                                    <?php else: ?>
                                        <div class="w-6 h-6 rounded-full border border-dashed border-slate-300 dark:border-slate-700 flex items-center justify-center text-slate-300 dark:text-slate-600 text-[8px] font-black">+</div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <button @click="$dispatch('open-new-task-modal', { column_id: <?php echo e($column->id); ?>, workspace_id: <?php echo e($currentWorkspace->id ?? 0); ?> })" 
                            class="w-full h-24 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 flex flex-col items-center justify-center text-slate-300 dark:text-slate-700 hover:border-primary-500/50 hover:text-primary-500 hover:bg-primary-50/50 dark:hover:bg-primary-500/5 transition-all duration-300 group/empty">
                        <svg class="w-6 h-6 mb-2 opacity-30 group-hover/empty:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                        <span class="text-[10px] font-black uppercase tracking-widest">Add Task</span>
                    </button>
                <?php endif; ?>
            </div>
        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    <!-- Add New Column -->
    <div class="flex-shrink-0 w-[320px] flex flex-col">
        <div x-show="!isAddingColumn" @click="isAddingColumn = true" 
             class="h-14 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl flex items-center justify-center text-slate-400 hover:text-primary-500 hover:border-primary-500/50 cursor-pointer transition-all group">
            <svg class="w-5 h-5 mr-3 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"></path></svg>
            <span class="text-[10px] font-black uppercase tracking-widest">Add New Column</span>
        </div>
        
        <div x-show="isAddingColumn" class="bg-white/60 dark:bg-slate-900/60 backdrop-blur-3xl border border-slate-200 dark:border-slate-800 rounded-2xl p-4 shadow-xl translate-y-0" x-transition.scale.origin.top>
            <input x-model="newColumnName" @keydown.enter="addColumn" placeholder="Column Name..." class="w-full bg-transparent border-none focus:ring-0 text-xs font-bold text-slate-700 dark:text-slate-200 mb-3" autofocus>
            <div class="flex gap-2">
                <button @click="addColumn" class="flex-1 bg-primary-600 text-white rounded-xl py-2 text-[10px] font-black uppercase tracking-widest hover:bg-primary-700 transition-all">Add</button>
                <button @click="isAddingColumn = false" class="flex-1 bg-slate-100 dark:bg-slate-800 rounded-xl py-2 text-[10px] font-black uppercase tracking-widest text-slate-500 transition-all">Cancel</button>
            </div>
        </div>
    </div>
</div>
<?php /**PATH C:\laragon\www\Taskweb\resources\views/partials/kanban-board.blade.php ENDPATH**/ ?>