<div x-data="{
    zoom: 40,
    scrollLeft: 0,
    days: [],
    startDate: new Date(new Date().setDate(new Date().getDate() - 10)),
    
    generateDays() {
        this.days = [];
        for(let i=0; i<60; i++) {
            let d = new Date(this.startDate);
            d.setDate(d.getDate() + i);
            this.days.push({
                date: d,
                label: d.getDate(),
                isToday: d.toDateString() === new Date().toDateString(),
                isWeekend: [0,6].includes(d.getDay())
            });
        }
    }
}" x-init="generateDays()" class="bg-white/60 dark:bg-slate-900/60 backdrop-blur-3xl rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-2xl overflow-hidden flex flex-col h-[600px]">

    <!-- Timeline Header -->
    <div class="flex items-center justify-between px-8 py-5 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-black/20">
        <div class="flex items-center gap-6">
            <h3 class="text-xl font-black text-slate-800 dark:text-slate-100 tracking-tight flex items-center gap-3">
                <svg class="w-6 h-6 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                Strategic Horizon
            </h3>
            
            <!-- Scale Control -->
            <div class="flex items-center gap-3 bg-white dark:bg-slate-800 px-4 py-2 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm">
                <span class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest">Scale</span>
                <input type="range" x-model="zoom" min="20" max="100" class="w-24 h-1 bg-slate-100 dark:bg-slate-700 rounded-full appearance-none cursor-pointer accent-primary-600">
            </div>
        </div>

        <button @click="startDate = new Date(new Date().setDate(new Date().getDate() - 5)); generateDays();" class="px-5 py-2 bg-slate-100 dark:bg-slate-800 hover:bg-primary-600 hover:text-white text-slate-600 dark:text-slate-400 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-sm">
            Reset Focus
        </button>
    </div>

    <!-- Timeline Body -->
    <div class="flex-1 flex overflow-hidden">
        <!-- Sidebar -->
        <div class="w-64 border-r border-slate-200 dark:border-slate-800 flex flex-col bg-slate-50/30 dark:bg-black/10 shrink-0">
            <div class="h-14 border-b border-slate-200 dark:border-slate-800 flex items-center px-6">
                <span class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]">Operational Task</span>
            </div>
            <div class="flex-1 overflow-y-auto premium-scrollbar divide-y divide-slate-100 dark:divide-slate-800/50">
                <?php $__currentLoopData = $tasks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $task): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="h-16 flex items-center px-6 hover:bg-white dark:hover:bg-slate-800 transition-colors cursor-pointer group" @click="openEditModal(<?php echo e(json_encode($task)); ?>)">
                        <div class="flex-1 min-w-0">
                            <h4 class="text-xs font-bold text-slate-700 dark:text-slate-300 truncate group-hover:text-primary-600 transition-colors"><?php echo e($task->title); ?></h4>
                            <span class="text-[9px] font-medium text-slate-400 uppercase tracking-tighter"><?php echo e($task->priority); ?></span>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>

        <!-- Scrollable Chart -->
        <div class="flex-1 overflow-x-auto overflow-y-auto premium-scrollbar relative" @scroll="scrollLeft = $event.target.scrollLeft">
            
            <!-- Time Scale Header -->
            <div class="sticky top-0 z-20 h-14 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 flex shadow-sm" :style="{ width: (days.length * zoom) + 'px' }">
                <template x-for="d in days">
                    <div class="flex-shrink-0 flex flex-col items-center justify-center border-r border-slate-100 dark:border-slate-800/50" :style="{ width: zoom + 'px' }">
                        <span class="text-[9px] font-bold text-slate-400 dark:text-slate-500 uppercase" x-text="d.date.toLocaleString('default', { weekday: 'short' }).charAt(0)"></span>
                        <span class="text-[11px] font-black" :class="d.isToday ? 'text-primary-600' : 'text-slate-700 dark:text-slate-300'" x-text="d.label"></span>
                    </div>
                </template>
            </div>

            <!-- Grid & Bars -->
            <div class="relative" :style="{ width: (days.length * zoom) + 'px' }">
                <!-- Vertical Grid -->
                <div class="absolute inset-0 flex">
                    <template x-for="d in days">
                        <div class="h-full border-r border-slate-100 dark:border-slate-800/30" :class="d.isWeekend ? 'bg-slate-50/50 dark:bg-white/[0.02]' : ''" :style="{ width: zoom + 'px' }"></div>
                    </template>
                </div>

                <!-- Task Bars -->
                <div class="relative z-10 divide-y divide-transparent">
                    <?php $__currentLoopData = $tasks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $task): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="h-16 flex items-center relative group/row">
                            <div class="absolute inset-y-2 rounded-2xl border transition-all duration-500 flex items-center px-4 shadow-sm hover:shadow-xl hover:-translate-y-0.5 cursor-pointer
                                <?php echo e($task->priority === 'urgent' ? 'bg-red-500/10 border-red-500/30 text-red-600' : ''); ?>

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

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

                                <?php echo e($task->priority === 'low' ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-600' : ''); ?>"
                                <?php
                                    $start = $task->created_at ?? now();
                                    $end = $task->due_date ?? $start->copy()->addDays(3);
                                    $startDateObj = $startDate ?? now()->subDays(10);
                                    $diffInDays = $startDateObj->diffInDays($start, false);
                                    $duration = max(1, $start->diffInDays($end));
                                ?>
                                :style="{ 
                                    left: ((<?php echo e($diffInDays); ?> * zoom) + (zoom/4)) + 'px', 
                                    width: (<?php echo e($duration); ?> * zoom) + 'px' 
                                }"
                                @click="openEditModal(<?php echo e(json_encode($task)); ?>)"
                            >
                                <span class="text-[10px] font-black truncate tracking-tighter"><?php echo e($task->title); ?></span>
                                
                                <!-- Progress Indicator -->
                                <div class="absolute bottom-0 left-0 h-1 bg-current opacity-20 rounded-full" style="width: <?php echo e($task->progress); ?>%"></div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </div>
    </div>
</div>
<?php /**PATH C:\laragon\www\Taskweb\resources\views/partials/timeline-view.blade.php ENDPATH**/ ?>