<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 auto-rows-fr" x-ref="taskGrid">
    <?php $__currentLoopData = $tasks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $task): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="group relative bg-white/60 dark:bg-slate-900/60 backdrop-blur-3xl border border-slate-200 dark:border-slate-800 rounded-[2.5rem] shadow-xl transition-all duration-500 p-8 flex flex-col h-full hover:-translate-y-2 hover:shadow-primary-500/10 hover:border-primary-500/30 overflow-hidden"
             data-id="<?php echo e($task->id); ?>">
            
            <!-- Dynamic Background Glow -->
            <div class="absolute -top-24 -right-24 w-48 h-48 bg-primary-500/10 rounded-full blur-[80px] group-hover:bg-primary-500/20 transition-all duration-1000"></div>
            
            <!-- Header -->
            <div class="flex justify-between items-start mb-6 relative z-10">
                <div class="flex items-center gap-3">
                    <div class="w-2.5 h-2.5 rounded-full <?php echo e($task->priority === 'urgent' ? 'bg-red-500 animate-pulse' : 'bg-slate-300 dark:bg-slate-700'); ?> group-hover:bg-primary-500 transition-colors"></div>
                    <span class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500"><?php echo e($task->status ?? 'Backlog'); ?></span>
                </div>
                
                <button @click.stop="openEditModal(<?php echo e(json_encode($task)); ?>)" class="w-10 h-10 rounded-2xl flex items-center justify-center bg-slate-50 dark:bg-slate-800 hover:bg-primary-500 hover:text-white transition-all text-slate-400 dark:text-slate-500 shadow-sm border border-slate-100 dark:border-slate-700">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
                </button>
            </div>

            <!-- Content -->
            <div class="mb-6 relative z-10">
                <h3 class="font-black text-2xl text-slate-800 dark:text-slate-100 mb-3 tracking-tight group-hover:text-primary-600 transition-colors line-clamp-2 cursor-pointer" @click="openEditModal(<?php echo e(json_encode($task)); ?>)"><?php echo e($task->title); ?></h3>
                
                <?php if($task->description): ?>
                    <p class="text-[11px] font-medium text-slate-500 dark:text-slate-400 line-clamp-3 leading-relaxed opacity-80"><?php echo e(strip_tags($task->description)); ?></p>
                <?php endif; ?>
            </div>

            <!-- Progress Visualization -->
            <div class="mt-auto relative z-10">
                <?php if($task->children->count() > 0): ?>
                    <div class="mb-8 group/progress">
                        <div class="flex items-center justify-between text-[9px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3">
                            <span>Lifecycle</span>
                            <span class="text-primary-600"><?php echo e($task->progress); ?>%</span>
                        </div>
                        <div class="w-full h-1.5 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden p-px">
                            <div class="h-full bg-gradient-to-r from-primary-500 to-indigo-600 rounded-full shadow-[0_0_12px_rgba(79,70,229,0.3)] transition-all duration-1000" style="width: <?php echo e($task->progress); ?>%"></div>
                        </div>
                    </div>
                <?php else: ?>
                    <div class="mb-6 h-px w-full bg-slate-100 dark:bg-slate-800/50"></div>
                <?php endif; ?>
                
                <!-- Footer Grid -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <!-- Date Pill -->
                        <div class="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-50 dark:bg-slate-800 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-500 dark:text-slate-400'); ?>">
                            <svg class="w-4 h-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            <?php echo e($task->due_date ? $task->due_date->format('M d') : '---'); ?>

                        </div>
                        
                        <!-- Priority Pill -->
                        <div class="px-3 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-widest
                            <?php echo e($task->priority === 'urgent' ? 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400' : ''); ?>

                            <?php echo e($task->priority === 'high' ? 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400' : ''); ?>

                            <?php echo e($task->priority === 'medium' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400' : ''); ?>

                            <?php echo e($task->priority === 'low' ? 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400' : ''); ?>">
                            <?php echo e($task->priority); ?>

                        </div>
                    </div>

                    <!-- Assignee -->
                    <div class="relative group/avatar">
                        <?php if($task->assignee): ?>
                            <img src="https://ui-avatars.com/api/?name=<?php echo e(urlencode($task->assignee->name)); ?>&background=F1F5F9&color=64748B&size=40" 
                                 class="w-10 h-10 rounded-2xl border-2 border-white dark:border-slate-700 shadow-lg group-hover/avatar:scale-110 transition-transform cursor-pointer grayscale hover:grayscale-0" 
                                 alt="">
                            <div class="absolute -bottom-1 -right-1 w-3.5 h-3.5 bg-emerald-500 border-2 border-white dark:border-slate-900 rounded-full shadow-sm"></div>
                        <?php else: ?>
                            <div class="w-10 h-10 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800 flex items-center justify-center text-slate-300 dark:text-slate-700 hover:border-primary-500 hover:text-primary-500 transition-all text-xs font-black">+</div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php /**PATH C:\laragon\www\Taskweb\resources\views/partials/task-grid.blade.php ENDPATH**/ ?>