<div x-data="{
    currentDate: new Date(),
    days: [],
    get monthName() { return this.currentDate.toLocaleString('default', { month: 'long' }); },
    get monthYear() { return this.currentDate.getFullYear(); },
    
    generateCalendar() {
        const year = this.currentDate.getFullYear();
        const month = this.currentDate.getMonth();
        const firstDay = new Date(year, month, 1).getDay();
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        const prevMonthDays = new Date(year, month, 0).getDate();
        
        this.days = [];
        for (let i = firstDay - 1; i >= 0; i--) {
            this.days.push({ day: prevMonthDays - i, isCurrent: false, date: new Date(year, month - 1, prevMonthDays - i) });
        }
        for (let i = 1; i <= daysInMonth; i++) {
            this.days.push({ day: i, isCurrent: true, date: new Date(year, month, i) });
        }
        const remaining = 42 - this.days.length;
        for (let i = 1; i <= remaining; i++) {
            this.days.push({ day: i, isCurrent: false, date: new Date(year, month + 1, i) });
        }
    },
    
    prev() { 
        this.currentDate = new Date(this.currentDate.setMonth(this.currentDate.getMonth() - 1));
        this.generateCalendar(); 
    },
    next() { 
        this.currentDate = new Date(this.currentDate.setMonth(this.currentDate.getMonth() + 1));
        this.generateCalendar(); 
    },
    today() { 
        this.currentDate = new Date(); 
        this.generateCalendar(); 
    },
    
    isToday(d) {
        const t = new Date();
        return d.getDate() === t.getDate() && d.getMonth() === t.getMonth() && d.getFullYear() === t.getFullYear();
    },
    
    formatDate(d) {
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }
}" x-init="generateCalendar()" 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 relative">

    <!-- Header Control -->
    <div class="flex items-center justify-between px-8 py-6 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-black/20">
        <div class="flex items-center gap-6">
            <h2 class="text-3xl font-black text-slate-800 dark:text-slate-100 tracking-tighter">
                <span x-text="monthName" class="text-primary-600"></span> 
                <span x-text="monthYear" class="text-slate-400 dark:text-slate-500 font-bold ml-2"></span>
            </h2>
            
            <div class="flex items-center bg-white dark:bg-slate-800 rounded-2xl p-1 border border-slate-200 dark:border-slate-700 shadow-sm">
                <button @click="prev()" class="p-2.5 hover:bg-slate-50 dark:hover:bg-slate-700 rounded-xl transition-all text-slate-400 hover:text-primary-500">
                    <svg class="w-5 h-5" 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-6 bg-slate-200 dark:bg-slate-700 mx-1"></div>
                <button @click="next()" class="p-2.5 hover:bg-slate-50 dark:hover:bg-slate-700 rounded-xl transition-all text-slate-400 hover:text-primary-500">
                    <svg class="w-5 h-5" 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>
        </div>
        
        <button @click="today()" class="px-6 py-2.5 bg-primary-600 hover:bg-primary-700 text-white rounded-xl text-xs font-black uppercase tracking-widest transition-all duration-300 shadow-lg shadow-primary-500/20 active:scale-95">
            Today
        </button>
    </div>

    <!-- Calendar Matrix Headers -->
    <div class="grid grid-cols-7 border-b border-slate-200 dark:border-slate-800">
        <template x-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']">
            <div class="py-3 text-center text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]" x-text="day"></div>
        </template>
    </div>

    <!-- Calendar Matrix Grid -->
    <div class="grid grid-cols-7 divide-x divide-y divide-slate-100 dark:divide-slate-800/50 border-l border-slate-100 dark:border-slate-800/50">
        <template x-for="(d, i) in days" :key="i">
            <div class="min-h-[140px] p-3 transition-all duration-300 group/cell relative"
                 :class="d.isCurrent ? 'bg-transparent' : 'bg-slate-50/50 dark:bg-black/20 opacity-50'">
                
                <!-- Date Number -->
                <div class="flex justify-between items-start mb-2 relative z-10">
                    <span class="w-8 h-8 flex items-center justify-center rounded-xl text-xs font-black transition-all duration-300"
                          :class="isToday(d.date) ? 'bg-primary-600 text-white shadow-lg shadow-primary-600/40' : 'text-slate-400 dark:text-slate-500 group-hover/cell:bg-slate-100 dark:group-hover/cell:bg-slate-800'" 
                          x-text="d.day"></span>
                </div>

                <!-- Event Slots -->
                <div class="space-y-1 relative z-10">
                    @forelse($tasks as $task)
                        @if($task->due_date)
                            <template x-if="formatDate(d.date) === '{{ $task->due_date->format('Y-m-d') }}'">
                                <div @click.stop="openEditModal({{ json_encode($task) }})" 
                                     class="group/event px-2 py-1.5 rounded-lg text-[9px] font-bold border cursor-pointer transition-all duration-200 truncate
                                        {{ $task->priority === 'urgent' ? 'bg-red-50 border-red-100 text-red-600 hover:bg-red-500 hover:text-white' : '' }}
                                        {{ $task->priority === 'high' ? 'bg-amber-50 border-amber-100 text-amber-600 hover:bg-amber-500 hover:text-white' : '' }}
                                        {{ $task->priority === 'medium' ? 'bg-indigo-50 border-indigo-100 text-indigo-600 hover:bg-indigo-500 hover:text-white' : '' }}
                                        {{ $task->priority === 'low' ? 'bg-emerald-50 border-emerald-100 text-emerald-600 hover:bg-emerald-500 hover:text-white' : '' }} dark:bg-opacity-10 dark:hover:bg-opacity-100">
                                    {{ $task->title }}
                                </div>
                            </template>
                        @endif
                    @empty
                    @endforelse
                </div>
            </div>
        </template>
    </div>
</div>
