app/resources/views/livewire/schedule/schedule-calendar.blade.php

<div>
    <h1 class="text-2xl font-syncopate text-accent-blue mb-6">SCHEDULE</h1>

    <!-- Schedule Generator Component -->
    <livewire:schedule.schedule-generator />

    <!-- Flash Messages -->
    @if (session()->has('success'))
        <div class="border-2 border-success text-success rounded p-4 mb-6">
            {{ session('success') }}
        </div>
    @endif

    @if (session()->has('error'))
        <div class="border-2 border-danger text-danger rounded p-4 mb-6">
            {{ session('error') }}
        </div>
    @endif

    <!-- Month Navigation -->
    <div class="flex justify-between items-center mb-6">
        <button wire:click="previousMonth" 
                class="px-4 py-2 bg-gray-700 text-accent-blue rounded hover:bg-gray-600 transition-colors duration-200">
            ← Previous
        </button>
        
        <h2 class="text-xl font-bold text-gray-100">{{ $this->monthName }}</h2>
        
        <button wire:click="nextMonth" 
                class="px-4 py-2 bg-gray-700 text-accent-blue rounded hover:bg-gray-600 transition-colors duration-200">
            Next →
        </button>
    </div>

    <!-- Calendar Grid - Desktop -->
    <div class="hidden md:block">
        <div class="grid grid-cols-7 gap-2 mb-4">
            <!-- Days of week headers -->
            @foreach(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as $day)
                <div class="text-center text-accent-blue font-bold p-2">{{ $day }}</div>
            @endforeach
        </div>

        <div class="grid grid-cols-7 gap-2">
            @foreach($calendarDays as $dayData)
                <div class="min-h-[120px] border rounded-lg p-2
                    {{ $dayData['day'] ? 'bg-gray-500' : 'bg-gray-800' }}
                    {{ $dayData['isToday'] ? 'border-2 border-accent-blue' : 'border-gray-600' }}">

                    @if($dayData['day'])
                        <!-- Day number -->
                        <div class="font-bold mb-2 {{ $dayData['isToday'] ? 'text-accent-blue' : 'text-gray-100' }}">
                            {{ $dayData['day'] }}
                        </div>

                        <!-- Scheduled dishes -->
                        @if($dayData['scheduledDishes']->isNotEmpty())
                            <div class="space-y-1">
                                @foreach($dayData['scheduledDishes'] as $scheduled)
                                    <div class="bg-primary rounded p-1 text-xs text-white flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-4 h-4 bg-white text-primary rounded-full flex items-center justify-center text-xs font-bold mr-1">
                                                {{ strtoupper(substr($scheduled->user->name, 0, 1)) }}
                                            </div>
                                            <span class="truncate">{{ $scheduled->userDish?->dish?->name ?? 'Skipped' }}</span>
                                        </div>

                                        <!-- Action buttons -->
                                        <div class="flex space-x-1" x-data="{ showActions: false }">
                                            <button @click="showActions = !showActions"
                                                    class="text-white hover:text-gray-300">
                                                ⋮
                                            </button>

                                            <div x-show="showActions"
                                                 @click.away="showActions = false"
                                                 x-cloak
                                                 class="absolute bg-gray-700 border border-secondary rounded mt-4 ml-4 shadow-lg z-10">
                                                <button wire:click="regenerateForUserDate('{{ $dayData['date']->format('Y-m-d') }}', {{ $scheduled->user->id }})"
                                                        class="block w-full text-left px-3 py-1 text-xs hover:bg-gray-600 text-accent-blue">
                                                    Regenerate
                                                </button>
                                                <button wire:click="skipDay('{{ $dayData['date']->format('Y-m-d') }}', {{ $scheduled->user->id }})"
                                                        class="block w-full text-left px-3 py-1 text-xs hover:bg-gray-600 text-danger">
                                                    Skip
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-gray-400 text-xs">No dishes scheduled</div>
                        @endif
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <!-- Calendar List - Mobile -->
    <div class="md:hidden space-y-2">
        @foreach($calendarDays as $dayData)
            @if($dayData['day'])
                <div class="border rounded-lg p-3
                    {{ $dayData['isToday'] ? 'border-2 border-accent-blue bg-gray-600' : 'border-gray-600 bg-gray-500' }}">

                    <!-- Day header -->
                    <div class="flex items-center justify-between mb-2">
                        <div class="font-bold {{ $dayData['isToday'] ? 'text-accent-blue' : 'text-gray-100' }}">
                            {{ $dayData['date']->format('D, M j') }}
                            @if($dayData['isToday'])
                                <span class="text-xs ml-2">(Today)</span>
                            @endif
                        </div>
                    </div>

                    <!-- Scheduled dishes -->
                    @if($dayData['scheduledDishes']->isNotEmpty())
                        <div class="space-y-2">
                            @foreach($dayData['scheduledDishes'] as $scheduled)
                                <div class="bg-primary rounded p-2 text-sm text-white flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-6 h-6 bg-white text-primary rounded-full flex items-center justify-center text-sm font-bold mr-2">
                                            {{ strtoupper(substr($scheduled->user->name, 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="font-medium">{{ $scheduled->userDish?->dish?->name ?? 'Skipped' }}</div>
                                            <div class="text-xs opacity-75">{{ $scheduled->user->name }}</div>
                                        </div>
                                    </div>

                                    <!-- Action buttons -->
                                    <div class="flex space-x-2" x-data="{ showActions: false }">
                                        <button @click="showActions = !showActions"
                                                class="text-white hover:text-gray-300 p-1">
                                            ⋮
                                        </button>

                                        <div x-show="showActions"
                                             @click.away="showActions = false"
                                             x-cloak
                                             class="absolute right-4 bg-gray-700 border border-secondary rounded shadow-lg z-10">
                                            <button wire:click="regenerateForUserDate('{{ $dayData['date']->format('Y-m-d') }}', {{ $scheduled->user->id }})"
                                                    class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-600 text-accent-blue">
                                                Regenerate
                                            </button>
                                            <button wire:click="skipDay('{{ $dayData['date']->format('Y-m-d') }}', {{ $scheduled->user->id }})"
                                                    class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-600 text-danger">
                                                Skip
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-gray-400 text-sm">No dishes scheduled</div>
                    @endif
                </div>
            @endif
        @endforeach
    </div>


    <!-- Regenerate Modal -->
    @if($showRegenerateModal)
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-gray-600 border-2 border-secondary rounded-lg p-6 w-full max-w-md mx-4">
                <h2 class="text-xl text-accent-blue mb-4">Regenerate Day</h2>
                <p class="text-gray-100 mb-6">
                    This will clear the selected day and allow for regeneration. Continue?
                </p>
                
                <div class="flex justify-end space-x-3">
                    <button wire:click="cancel" 
                            class="px-4 py-2 border-2 border-secondary text-gray-100 rounded hover:bg-gray-700 transition-colors duration-200">
                        Cancel
                    </button>
                    <button wire:click="confirmRegenerate" 
                            class="px-4 py-2 bg-warning text-white rounded hover:bg-yellow-600 transition-colors duration-200">
                        Regenerate
                    </button>
                </div>
            </div>
        </div>
    @endif

    <style>
        [x-cloak] { display: none !important; }
    </style>
</div>