110 lines
No EOL
5.2 KiB
PHP
110 lines
No EOL
5.2 KiB
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> |