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

<div class="bg-gray-700 border-2 border-secondary rounded-lg p-6 mb-6" x-data="{ open: window.innerWidth >= 768 }">
    <button @click="open = !open" class="w-full flex justify-between items-center md:cursor-default">
        <h3 class="text-lg font-bold text-accent-blue">Generate Schedule</h3>
        <span class="md:hidden text-accent-blue" x-text="open ? '−' : '+'"></span>
    </button>

    <div x-show="open" x-collapse class="mt-4 md:!block" x-cloak>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
        <!-- Month Selection -->
        <div>
            <label class="block text-sm font-medium mb-2">Month</label>
            <select wire:model="selectedMonth" 
                    class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue">
                @foreach($months as $value => $name)
                    <option value="{{ $value }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Year Selection -->
        <div>
            <label class="block text-sm font-medium mb-2">Year</label>
            <select wire:model="selectedYear" 
                    class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue">
                @foreach($years as $year)
                    <option value="{{ $year }}">{{ $year }}</option>
                @endforeach
            </select>
        </div>

        <!-- Clear Existing Option -->
        <div class="flex items-end">
            <label class="flex items-center">
                <input wire:model="clearExisting" 
                       type="checkbox" 
                       class="rounded border-secondary bg-gray-600 text-primary focus:ring-accent-blue mr-2">
                <span class="text-sm">Clear existing schedule</span>
            </label>
        </div>
    </div>

    <!-- User Selection -->
    <div class="mb-4">
        <label class="block text-sm font-medium mb-2">Select Users</label>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 max-h-32 overflow-y-auto border border-secondary rounded p-3 bg-gray-600">
            @foreach($users as $user)
                <label class="flex items-center">
                    <input type="checkbox" 
                           wire:model="selectedUsers" 
                           value="{{ $user->id }}" 
                           class="rounded border-secondary bg-gray-600 text-primary focus:ring-accent-blue mr-2">
                    <div class="flex items-center">
                        <div class="w-5 h-5 bg-primary rounded-full flex items-center justify-center text-white text-xs font-bold mr-1">
                            {{ strtoupper(substr($user->name, 0, 1)) }}
                        </div>
                        <span class="text-sm">{{ $user->name }}</span>
                    </div>
                </label>
            @endforeach
        </div>
        @error('selectedUsers') <span class="text-danger text-xs">{{ $message }}</span> @enderror
    </div>

    <!-- Advanced Options Toggle -->
    <div class="mb-4">
        <button wire:click="toggleAdvancedOptions" 
                class="text-accent-blue hover:underline text-sm">
            {{ $showAdvancedOptions ? 'Hide' : 'Show' }} Advanced Options
        </button>
    </div>

    @if($showAdvancedOptions)
        <div class="bg-gray-800 border border-secondary rounded p-4 mb-4">
            <h4 class="text-md font-bold text-gray-100 mb-2">Advanced Options</h4>
            <p class="text-gray-300 text-sm mb-2">
                Future features: Recurrence patterns, dish rotation rules, dietary restrictions, etc.
            </p>
            <div class="text-gray-500 text-xs">
                These options will be available in future updates.
            </div>
        </div>
    @endif

    <!-- Action Buttons -->
    <div class="flex space-x-3">
        <button wire:click="generate" 
                wire:loading.attr="disabled"
                class="px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition-colors duration-200 disabled:opacity-50">
            <span wire:loading.remove wire:target="generate">Generate Schedule</span>
            <span wire:loading wire:target="generate">Generating...</span>
        </button>
        
        <button wire:click="clearMonth"
                class="px-4 py-2 border-2 border-danger text-danger rounded hover:bg-danger hover:text-white transition-colors duration-200">
            Clear Month
        </button>
    </div>

    <!-- Loading Indicator -->
    <div wire:loading wire:target="generate" class="mt-4">
        <div class="flex items-center text-accent-blue">
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Generating schedule...
        </div>
    </div>
    </div>
</div>